Angular FormGroup 没有收到来自子 FormGroup 的任何更改答案

【问题标题】：Angular FormGroup receives no changes from child FormGroupAngular FormGroup 没有收到来自子 FormGroup 的任何更改
【发布时间】：2021-05-28 21:30:19
【问题描述】：

我有一个响应式 Angular 11 表单，它根据选择动态构建附加控件。这些控件都添加在父表单内的同一个 FormGroup 中并且是必需的，但是即使我填写了每个字段，父表单仍然无效。

模板如下所示：

<form [formGroup]="emailForm" (ngSubmit)="onSubmit()">
    <div class="template">
        <label for="template">Template</label>
        <select formControlName="template" id="template" required>
            <option *ngFor="let template of templateNames" value="{{template}}">{{template}}</option>
        </select>
    </div>

    <div class="language">
        <label for="language">Language</label>
        <select formControlName="language" id="language" required>
            <option *ngFor="let language of templateLanguages" value="{{language}}">{{language}}</option>
        </select>
    </div>

    <div class="placeholders" formGroupName="placeholders">
        <p>Placeholders</p>
        <div *ngFor="let placeholder of templatePlaceholders" class="placeholders__placeholder">
            <label for="{{placeholder}}-field">{{placeholder}}</label>
            <input id="{{placeholder}}-field" required type="text">
        </div>
    </div>

    <div class="submit">
        <input type="submit" value="Send" [disabled]="!emailForm.valid">
    </div>
</form>

这是组件（大部分行为被剥离以保持示例最小且可重复）：

public emailForm!: FormGroup;
public templateNames = ["one", "two", "three"];
public templateLanguages = ["en", "pt", "de"];
public templatePlaceholders: string[] = [];

ngOnInit(): void {
  this.emailForm = new FormGroup({
    template: new FormControl(),
    language: new FormControl(),
    placeholders: new FormGroup({}),
  }, Validators.required);

  this.populatePlaceholders();
}

populatePlaceholders(): void {
  const placeholders: string[] = [];
  // Some API call...
  // ...

  const placeholderFields: Record<string, FormControl> = {};
  
  placeholders.forEach((placeholder) => {
    placeholderFields[placeholder] = new FormControl("", Validators.required);
    this.templatePlaceholders.push(placeholder);
  });

  this.emailForm.setControl("placeholders", new FormGroup(placeholderFields));
}

问题是，即使我填写了每个字段，即使根本没有占位符字段，提交按钮仍然处于禁用状态。我尝试在valueChanges 上记录emailForm.placoholders 的状态，我可以看到它保持不变（如果我在字段中输入任何内容，该值不会显示在其控件中），并且valueChanges 事件是'如果我在子字段中输入任何内容，甚至不会触发，只有当它在一个第一级控件中时才会触发。

我对 Angular 还是很陌生，所以我一定是做错了什么，但是什么？

编辑： 代码堆栈闪电战： https://stackblitz.com/edit/angular-ivy-mdzjn8?file=src/app/app.component.ts

【问题讨论】：

标签： angular forms dynamic angular-forms

【解决方案1】：

我发现了问题：我忘记将formControlName 属性添加到模板中的控件。我加了formControlName="{{placeholder}}"，问题就解决了。

我希望像这样的容易忘记的事情有一个明确的错误；真的很难调试。

【讨论】：