具有多个表单组的 Angular 6 动态表单

Question

我正在使用 Angular 6 构建动态表单。请在此处找到 https://stackblitz.com/edit/angular6-dynamic-form-ovyftx

但是在提交时没有以正确的格式获取表单值。我越来越喜欢

{"group1":{"brave":"","firstName":"Bombasto","emailAddress":"","multiBox":""},"group2":{"brave":"","firstName":"Bombasto","emailAddress":"","multiBox":""}}

我应该喜欢

{"group1":{"brave":"","firstName":"Bombasto"},"group2":{"emailAddress":"","multiBox":""}}

因为字段属于不同的组。如何解决这个问题？另外我如何在组的基础上验证表单。就像一个字段无效一样，该组应该有一个红色边框。

Answer 1

您在服务 question-control.service 上犯了一个小错误。您正在将新控件添加到同一变量“组”。所以在第二个循环中，您之前的控件也被添加到其中。只需在下一个循环中重置其值。您可以开始解决第一个问题。

Object.keys(questions).forEach((eachgroup: string) => {
    group = {}; //here you new to reset the value of group
    questions[eachgroup].forEach(question => {
      group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
        : new FormControl(question.value || '');
    });
    sections[eachgroup] = new FormGroup(group);
  });

对于验证部分，您可以使用 [ngClass] 指令并将您的自定义 css 应用于无效输入，如下所示:

    <div [formGroup]="form" [ngClass]="{'isa_error':isValid?false:true}">
        <label [attr.for]="question.key">{{question.label}}</label>
....
</div>

工作代码示例:https://stackblitz.com/edit/angular6-dynamic-form-wvspuw

应用程序:https://angular6-dynamic-form-wvspuw.stackblitz.io