错误:formControlName必须与父formGroup指令一起使用.您将需要添加formGroup指令-Angular反应形式
我有以下模板.我正在尝试处理反应式表单,但遇到了问题.
I have the following template. I'm trying to get to grips with reactive forms but am having a problem.
<form [formGroup]="guestForm" novalidate>
<div class="panel-body">
<form>
<div class="col-md-12 col-sm-12">
<div class="form-group col-md-3 col-sm-6">
<label>First Name* </label>
<input formControlName="firstname" type="text" class="form-control input-sm">
</div>
</div>
</form>
</div>
</form>
然后在我的组件中拥有:
Then in my component I have:
@Component({
selector: 'guest-input',
templateUrl: './guest-input.component.html',
})
export class GuestInputComponent implements OnInit {
@Input()
guest: Guest;
guestForm: FormGroup;
constructor(private _fb: FormBuilder) { }
ngOnInit() {
this.guestForm = this._fb.group({
firstname: ['test', [Validators.required, Validators.minLength(3)]]
});
}
这一切对我来说都很好,但是由于某种原因,我得到了:
This all looks fine to me but for some reason I am getting:
错误:未捕获(承诺):错误:formControlName必须与父formGroup指令一起使用.您将要添加一个formGroup 指令并将其传递给现有的FormGroup实例(您可以在您的类中创建一个实例).
Error: Uncaught (in promise): Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).
我以为我已经在我的<form>
中声明了这一点.
I thought I had declared this in my <form>
.
您已使用FormGroup
指令将表单标签嵌套在表单标签中,将其删除:
You have nested form tag inside form tag with FormGroup
directive, remove it:
<form [formGroup]="guestForm" novalidate>
<div class="panel-body">
<form> -> Remove this
<div class="col-md-12 col-sm-12">
<div class="form-group col-md-3 col-sm-6">
<label>First Name* </label>
<input formControlName="firstname" type="text" class="form-control input-sm">
</div>
</div>
</form> -> Remove this
</div>
</form>