首页 文章

Angular2:嵌套表单组

提问于
浏览
1

我创建了这个表单:

this.cardForm = this.fb.group({
    number: ['', Validators.compose([Validators.required, this.validateCardNumber])],
    holderName: ['', Validators.required],
    expiry: this.fb.group({
      expirationMonth: ['', Validators.required],
      expirationYear: ['', Validators.required],
    }),

如您所见,我创建了一个名为 expiry 的嵌套表单组 . 进入我的模板:

<form [formGroup]="cardForm" novalidate="novalidate" (ngSubmit)="onSave()">
  <div class="form-group">
    <label for="cardnumber">Card number</label>
    <input
        type="text"
        formControlName="number"
        placeholder="Card number"
        name="cardnumber"
        class="input-transparent form-control">
  </div>
  ...
  <div class="form-group" formGroupName="expiry">
    <label for="expirationmonth">Expiration month</label>
    <select2 id="default-select"
      name="expirationmonth"
      [data]="months$ | async"
      [width]="250"
      [options]="select2Options">
    </select2>

    <label for="expirationyear">Expiration year</label>
    <select2 id="default-select2"
      name="expirationyear"
      [data]="years$ | async"
      [width]="250"
      [options]="select2Options">
    </select2>
  </div>

我收到这个错误:

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

   Example:


<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

有任何想法吗?

1 回答

  • 6

    在组件端设置 this.cardForm 之前,您的视图已加载 .

    试着把 *ngIf

    <form *ngIf="cardForm" [formGroup]="cardForm" novalidate="novalidate" (ngSubmit)="onSave()">
    

    或者尝试使用 *ngIf 封装在div中:

    <div *ngIf="cardForm">
        <form [formGroup]="cardForm" novalidate="novalidate" (ngSubmit)="onSave()">
    
        </form>
       </div>
    

相关问题