javascript - 我们如何在 Angular 中获取表单值作为具有多个属性的对象？

Question

我有一个对象数组：

arr = [{
    "name": "firstName",
    "type": "text",
    "required": false
  },
  {
    "name": "lastName",
    "type": "text",
    "required": false
  },
    {
    "name": "dob",
    "type": "date",
    "required": false
  }
]

我正在使用 *ngFor 和 formControlName 在 HTML 中创建一个表单，如下所示：

createFormgroup() {
  arr.forEach((control: any) => {
    this.createFormGroup.addControl(
      control.name,
      this.fb.control(false)
    );
    this.createFormGroup.addControl(
      "required" + i,
      this.fb.control(false)
    );
  });
}

submit(form: NgForm) {
  console.log(form.value)
}

<mat-label>Enter form name:</mat-label>
<input class="form-name-input" matInput placeholder="Form Name" formControlName="formName" required>

<form [formGroup]="createFormGroup" (ngSubmit)="submit(createFormGroup)">
  <div *ngFor="let a of arr; let i = index">
    <mat-checkbox formControlName="{{a.name}}">{{ a.name }}</mat-checkbox>
    <mat-checkbox formControlName="required{{i}}">required</mat-checkbox>
  </div>
  <button type="submit">submit</button>
</form>

在这里，我试图实现将值一起显示和发布为一个相对于另一个的对象。例如，如果我在 HTML 中检查名字、dob 和所需的，我希望在单击 submit() 时获得整个对象。 单击提交（）时，我正在寻找如下输出：

form.value = [{
  "name": "firstname",
  "type": "text",
  required: true
}, {
  "name": "dob",
  "type": "date",
  required: false
}]

我对如何实现这一目标感到困惑。有办法吗？此外，我需要为每个必填字段分配不同的 formControl 名称。我不知道该怎么做。

我附上一张图片以供理解。 用户界面图片

注意：我知道如何从表单中获取值，但我正在寻找一种复制整个对象的方法

为了简单起见：我需要用于创建表单的相同数组，最后我需要根据用户输入更改相同对象属性的相同数组

标签： javascriptarraysangulartypescriptreactive-forms

Answer 1

您可以通过以下方式实现：

• 为源数组中的每个项目定义一个子表单组，并将其添加到 main formGroup。
• 为名称复选框添加change事件处理程序，以禁用/启用子表单组，从值中排除（在 Angular 中，如果禁用表单控件或子表单组，则其值将从 FormGroup 中排除.值)
• 循环遍历组件模板中的表单数组，并仅绑定到required表单控件。

所以组件类将如下所示：

ngOnInit() {
  this.formGroup = this.fb.group({
    formName: null,
    arrForm: this.fb.array(this.createSubFormGroup())
  });
}

createSubFormGroup() {
  return this.arr.map(
    (control: { name: string; type: string; required: boolean }) => {
      const subForm = this.fb.group({
        name: control.name,
        type: control.type,
        required: control.required
      });

      // disable by default to be not included with the value until it's checked.
      subForm.disable();

      return subForm;
    }
  );
}

/** To enable/disable the sub formGroup if the checkbox checked/unchecked */
onNameCheckChange(ndx: number, event: MatCheckboxChange) {
  (this.formGroup.get('arrForm') as FormArray).controls[ndx][event.checked ? 'enable' : 'disable']();
}

submit() {
  console.log(this.formGroup.value?.arrForm || []);
}

组件模板如下所示：

<form [formGroup]="formGroup" (ngSubmit)="submit()">
  <mat-label>Enter form name:</mat-label>
  <input class="form-name-input" matInput placeholder="Form Name" formControlName="formName" required>

  <div formArrayName="arrForm">
    <div *ngFor="let a of arr; let i = index" [formGroupName]="i">
      <mat-checkbox (change)="onNameCheckChange(i, $event)">{{ a.name }}</mat-checkbox>
      <mat-checkbox formControlName="required">required</mat-checkbox>
    </div>
  </div>
  <button type="submit">submit</button>
</form>

这是正在工作的StackBiltz