javascript - 如何使用 Angular 数组从formbuilder保存

Question

这是代码：https://stackblitz.com/edit/angular-gs8yo7?file=src/app/app.component.ts

的HTML

<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item *ngFor="let control of listOfControl; let i = index">
        <nz-form-label *ngIf="i == 0" [nzFor]="control.controlInstance">
            <span translate>Project(s)</span>
        </nz-form-label>
        <nz-form-control [nzXs]="24">
            <div nz-row nzGutter="8">
                <div nz-col nzSpan="11">
                    <nz-select [formControlName]="project" name="projects" [attr.id]="control.id"
                               [nzPlaceHolder]="'Select Project(s)'">
                        <nz-option *ngFor="let item of project" [nzLabel]="item.description" [nzValue]="item.id">
                        </nz-option>
                    </nz-select>
                </div>
                <div nz-col nzSpan="11">
                    <nz-select formControlName="role" name="role" nzPlaceHolder="">
                        <nz-option *ngFor="let item of roles" [nzLabel]="item" [nzValue]="item"></nz-option>
                    </nz-select>
                </div>
                <div nz-col nzSpan="2">
                    <i nz-icon nzType="minus-circle-o" class="dynamic-delete-button"
                       (click)="removeField(control, $event)"></i>
                </div>
            </div>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-control>
            <button nz-button nzType="dashed" class="add-button" (click)="addField($event)">
                <i nz-icon nzType="plus"></i>
                Add field
            </button>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 20, offset: 4 }">
            <button nz-button nzType="primary">Submit</button>
        </nz-form-control>
    </nz-form-item>
</form>

TS

validateForm: FormGroup;
  listOfControl: Array<{ id: number; controlInstance: string }> = [];

  projects = [{
    "id": "1ueI",
    "description": "Project1"
  },{
    "id": "iqwu28",
    "description": "Project2"
  },{
    "id": "1938qwe",
    "description": "Project3"
  }];

  roles = ['ROLE_ADMIN', 'ROLE_USER'];

  addField(e?: MouseEvent): void {
    if (e) {
      e.preventDefault();
    }
    const id = this.listOfControl.length > 0 ? this.listOfControl[this.listOfControl.length - 1].id + 1 : 0;

    const control = {
      id,
      controlInstance: `passenger${id}`
    };
    const index = this.listOfControl.push(control);
    console.log(this.listOfControl[this.listOfControl.length - 1]);
    this.validateForm.addControl(
      this.listOfControl[index - 1].controlInstance,
      new FormControl(null, Validators.required)
    );
  }

  removeField(i: { id: number; controlInstance: string }, e: MouseEvent): void {
    e.preventDefault();
    if (this.listOfControl.length > 1) {
      const index = this.listOfControl.indexOf(i);
      this.listOfControl.splice(index, 1);
      console.log(this.listOfControl);
      this.validateForm.removeControl(i.controlInstance);
    }
  }

  submitForm(): void {

  }

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.validateForm = this.fb.group({});
    this.addField();
  }

如何使用数组项保存数据？

我想做的是，当我单击“提交”时，它会像这样：

[
 { 
  username: 'sample',
  project: [ {
     id: '1ueI',
     role: 'ROLE_ADMIN'

  }, {
     id: '1938qwe',
     role: 'ROLE_USER'

  }]
}]

如何在角度使用formbuilder保存它，问题还在于数组，如何在formbuilder上应用它？

Answer 1

尝试下面的方式。

您在lstArr中获得表单数组数据

 lstArr : any = [];
 submitForm(): void {
 for (let val in this.validateForm .controls) {
      this.validateForm .controls[val].markAsTouched();
    }
    (<FormArray>this.listOfControl.get('itemRows')).controls.forEach((group: 
FormGroup) => {
      (<any>Object).values(group.controls).forEach((control: FormControl) => {
        control.markAsTouched();
      });
    });
      const form_data = this.validateForm.value;
      this.lstArr.push(form_data);
      console.log('form_data', form_data)
  }