首页 文章

错误:formControlName必须与父formGroup指令一起使用 . 您需要添加一个formGroup指令 - Angular反应形式

提问于
浏览
15

我有以下模板 . 我正试图掌握反应形式,但我遇到了问题 .

<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>

然后在我的组件中我有:

@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)]]
        });
    }

这一切对我来说都很好,但由于某种原因,我得到:

错误:未捕获(在承诺中):错误:formControlName必须与父formGroup指令一起使用 . 您将要添加formGroup指令并将其传递给现有的FormGroup实例(您可以在类中创建一个) .

我以为我已经在我的 <form> 中声明了这一点 .

2 回答

  • 20

    您已使用 FormGroup 指令在表单标记内嵌套表单标记,将其删除:

    <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>
    
  • 3

    modelDrivenForms 中, [formGroup]="guestForm" 应该在父元素中

    <div class="form-group col-md-3 col-sm-6" [formGroup]="guestForm">
      <label>First Name*  </label>
      <input formControlName="firstname" type="text" class="form-control input-sm">
    </div>
    

相关问题