angular2中的嵌套表单

2 回答

• 3

  检查这个适用于我的示例，直到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

  方法创建一组控件，包括 formControlName 例如 . login 和值 ['', Validators.required], 其中第一个参数是表单输入的初始值，secons是验证器或验证器数组，如 'email': ['', [Validators.required, 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);
  }
  

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

  回复于 2024-04-29T08:49:38+08:00
• 5

  Nested Form with nested ARRAY

  Plunker：https://plnkr.co/edit/sUjE1ULYhfDHLNBw2sRv?p=info Scotch.IO：https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

  我认为你的错误在于

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

  你应该推送你的Form / FormGroup对象不要控制 . 请参阅PLUNKER以查看工作示例 .

  正确的添加方法：

  addAddress() {
          const control = <FormArray>this.myForm.controls['addresses'];
          control.push(this.initAddress());
      }
  

  Nested Form with nested OBJECTS

  <form [formGroup]="myForm">
            <div formGroupName="address">
            <fieldset class="form-group">
                    <label>Street</label>
                    <input name="ulica" formControlName="street">
                    <label>City</label>
                    <input name="miasto" formControlName="city">
            </fieldset>
                        <label>Corresponding Address</label>
                        <fieldset class="form-group" formGroupName="correspondingAddress">
                           <label>Street</label>
                           <input name="ulica" formControlName="steet">
                           <label>City</label>
                           <input name="miasto" formControlName="city">
                        </fieldset>
             </div>
              </form>
  

  ...

  ngOnInit() {
      this.myForm = this._fb.group({
        address: this._fb.group({
          street : [''],
          city: [''],
          correspondingAddress: this._fb.group({
            street : [''],
            city: ['']
          })
        })
      });
    }
  

  回复于 2024-04-29T08:49:38+08:00