1

我正在使用 Angular 7。目前正在做的是，

用户可以输入数量（1,2,3等），动态字段的数量将按数量排列。

我想要实现的是删除数量字段并默认获取一组字段，并且当用户在最后一个字段上并按下“选项卡按钮”时字段开始归档并自动生成下一组动态字段。

例如：

目前正在做什么：

颜色：_______

形状：_______

输入数量：1

// 字段集重复 1 次。

颜色：_______

形状：_______

我想要达到的目标：

颜色：_______

形状：_______ //当我的输入专注于形状时，当我按下“标签按钮”时，会自动生成一组新的字段。

我的 component.ts 文件：

 public myForm: FormGroup;
  constructor(private _fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = this._fb.group({
      FrontEnd: ['',],
      languages: this._fb.array([
          this.initlanguage(),
      ])
  });
  }

   initlanguage() {
        return this._fb.group({
            color: [''],
            shape: ['']
        });
    }

    qty:number;
    newqty:number;
    addLanguage() {
      for(this.qty=0;this.qty<this.newqty;this.qty++){
      const control = <FormArray>this.myForm.controls['languages'];
      control.push(this.initlanguage());
      }
  }

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

我的 component.html 文件：

        <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
          <div formArrayName="languages">
            <div *ngFor="let language of myForm.controls.languages.controls; let i=index" class="panel panel-default">
              <div class="panel-heading">
                <span class="nc-mobile pull-right" *ngIf="myForm.controls.languages.controls.length > 1" (click)="removeLanguage(i)"></span>
              </div>
              <div class="panel-body" [formGroupName]="i">
                <div class="form-group col-xs-6">
                  <label>Color</label>
                  <input type="text" class="form-control" formControlName="color">
                </div>
                <div class="form-group col-xs-6">
                  <label>Shape</label>
                  <input type="text" class="form-control" formControlName="shape">
                </div>
              </div>
            </div>
          </div>
      <input placeholder="Enter Quantity here" [(ngModel)]="newqty"/> 

          <div class="margin-20">
            <a (click)="addLanguage()" style="cursor: default">
              Add another Fieldset +
            </a>
          </div>

          <div class="margin-20">
            <button type="submit" class="btn btn-primary pull-right" [disabled]="!myForm.valid">Submit</button>
          </div>
        </form>

摘要：当用户在最后选择的输入字段上按下选项卡时，生成动态字段集。

4

0 回答 0