angular2中的嵌套表单

发布时间：2020-12-17 17:51:00 所属栏目：安全来源：网络整理

导读：如何使用嵌套字段创建表单,我知道angular2 RC中的formArray但是有点混淆如何正确使用它？假设我有一个这样的形式 // Main Form with formArray named as `global_modifier`this.myForm = this._fb.group({ ....... name: ['',[]],global_modifier: this._fb

如何使用嵌套字段创建表单,我知道angular2 RC中的formArray但是有点混淆如何正确使用它？
假设我有一个这样的形式

// Main Form with formArray named as `global_modifier`
this.myForm = this._fb.group({
  .......
  name: ['',[]],global_modifier: this._fb.array([
    this.initGlobalModifiers()
  ])
  ....
});


removeModifier(i: number) {
  const control = <FormArray>this.myForm.controls['global_modifier'];
  control.removeAt(i);
}

addModifier() {
  const control = <FormArray>this.myForm.controls['global_modifier'];
  control.push(this.initGlobalModifiers());
}

/*global_modifier function having nested fields named `items` .....*/
initGlobalModifiers() {
  return this._fb.group({
  .....
    modifier_title: ['',items: this._fb.array([
      this.initItems()
    ])
    .........
  });
}


removeItem(i: number) {
  const control = <FormArray>this.myForm.controls['items'];
  control.removeAt(i);
}

addItem() {
  const control = <FormArray>this.myForm.controls['items'];
  control.push(this.initItems());
}

// items intilization
initItems() {
  return this._fb.group({
    item_title: ['',item_price: ['',[]]
  });
}

现在我很困惑如何在html中使用这个表单？

我正在尝试这个,但没有按预期工作..

<form [formGroup]="myForm" novalidate>
  <input type="text" placeholder="name" formControlName="name" maxlength="50">
  <div formArrayName="global_modifier" *ngFor="let cont of myForm.controls.global_modifier.controls; let i=index,let fst=first">
    <div [formGroupName]="i">
      <input type="text" placeholder="modifier_title" formControlName="modifier_title" maxlength="50">
      <button *ngIf="fst" [ngClass]="{'inputAddButton ':fst}" (click)="addModifier(i)" type="button">
        <i class="fa fa-plus fa-white" aria-hidden="true"></i>
      </button>
      <button *ngIf="!fst" [ngClass]="{'inputDeleteButton ':!fst}" (click)="removeModifier(i)">
        <i class="fa fa-trash-o fa-white" aria-hidden="true"></i>
      </button>

      <!--block For form mlutiple entrys-------------------->
      <div formArrayName="items">
        <div *ngFor="let items of cont.items; let item_index=index,let fst=first">
          <div [formGroupName]="i">
            <div style="margin-bottom:10px">
                     ............... NOTHING dISPLAY HERE ???
            </div>
          </div>
        </div>
      </div>
      <!--block For form mlutiple entrys---=------------>
      <br>
    </div>
  </div>
</form>

什么是我的代码中的错误？要么
有人在angular2中有嵌套表格的例子？

解决方法

检查这个适用于我的示例,直到rc4(没有检查更新的版本)：

表格标记

ngOnInit() {
    this.myForm = this.formBuilder.group({
    'loginCredentials': this.formBuilder.group({
    'login': ['',Validators.required],'email': ['',[Validators.required,customValidator]],'password': ['',Validators.required]
   }),'hobbies': this.formBuilder.array([
      this.formBuilder.group({
        'hobby': ['',Validators.required]
      })
    ])
  });
}

removeHobby(index: number){
    (<FormArray>this.myForm.find('hobbies')).removeAt(index);
  }

  onAddHobby() {
    (<FormArray>this.myForm.find('hobbies')).push(new FormGroup({
      'hobby': new FormControl('',Validators.required)
    }))
  }

HTML标记

<h3>Register page</h3>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div formGroupName="loginCredentials">
    <div class="form-group">
      <div>
        <label for="login">Login</label>
        <input  id="login" type="text" class="form-control" formControlName="login">
  </div>
  <div>
    <label for="email">Email</label>
    <input  id="email" type="text" class="form-control"  formControlName="email">
  </div>
  <div>
    <label for="password">Password</label>
    <input  id="password" type="text" class="form-control"  formControlName="password">
      </div>
    </div>
  </div>
  <div class="row" >
    <div  formGroupName="hobbies">
      <div class="form-group">
        <label>Hobbies array:</label>
        <div  *ngFor="let hobby of myForm.find('hobbies').controls; let i = index">
          <div formGroupName="{{i}}">
            <input id="hobby_{{i}}" type="text" class="form-control"  formControlName="hobby">
            <button *ngIf="myForm.find('hobbies').length > 1" (click)="removeHobby(i)">x</button>
          </div>
        </div>
        <button (click)="onAddHobby()">Add hobby</button>
      </div>
    </div>
  </div>
  <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

备注

this.myForm = this.formBuilder.group

使用用户的配置创建一个表单对象,并将其分配给this.myForm变量.

‘loginCredentials’：this.formBuilder.group

method创建一组控件,由一个formControlName组成. login和value [”,其中第一个参数是表单输入的初始值,secons是验证器或验证器数组,如’email’所示：[”,的CustomValidator],.

'hobbies': this.formBuilder.array

创建一个组数组,其中组的索引是数组中的formGroupName,访问方式如下：

<div *ngFor="let hobby of myForm.find('hobbies').controls; let i = index">
<div formGroupName="{{i}}">...</div>
</div>

onAddHobby() {
(<FormArray>this.myForm.find('hobbies')).push(new FormGroup({
'hobby': new FormControl('',Validators.required)
}))
}

此示例方法将新formGroup添加到数组中.
?目前访问需要指定我们想要访问的控件类型,在此示例中,此类型为：< FormArray>

removeHobby(index: number){
(<FormArray>this.myForm.find('hobbies')).removeAt(index);
}

与上述相同的规则适用于从数组中删除特定的表单控件

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!