Question

export class MyComponent implements OnInit {
    private myForm: FormGroup;

    constructor() {
        this.myForm = new FormGroup({
            fname: new FormGroup({ fname: new FormControl('', Validators.required) })            
        });
    }   
}

<div [formGroup]="myForm">
    name:
    <input type="text" formControlName="fname">
</div>

但在页面渲染上我得到了

错误TypeError：control.registerOnChange不是函数 at setUpControl（forms.es5.js：1842）

Answer 1

您有一个嵌套的表单组，您需要在模板中标记formGroupName="fname"：

<div [formGroup]="myForm">
  <div formGroupName="fname">
    <input type="text" formControlName="fname">
  </div>
</div>

此外，您对formgroup和formcontrol使用相同的名称，我建议您使用唯一的名称。

DEMO：https://stackblitz.com/edit/angular-f7dqkc?file=app%2Fapp.component.html

Answer 2

我认为这就是你想要的。

export class MyComponent implements OnInit {
    private myForm: FormGroup;

    constructor() {
        this.myForm = new FormGroup({
             fname: new FormControl('', Validators.required)       
        });
    }   
}

<div [formGroup]="myForm">
    name:
    <input type="text" formControlName="fname">
</div>

Answer 3

我认为你看起来像这样

export class MyComponent implements OnInit {
    private myForm: FormGroup;

    constructor() {
        this.myForm = new FormGroup({
             name: new FormGroup(
              { 
                fname: new FormControl('', Validators.required) }),   
                lname: new FormControl('', Validators.required) })     
              }
      );
    }   
}

<div [formGroup]="myForm">
  <div formGroupName="name">
    <input type="text" formControlName="fname">
    <input type="text" formControlName="lname">
  </div>
</div>

角度简单的FormControl

3 个答案: