Angular - formGroupName 值更改不会更新表单

Question

如标题所述，formGroupName值更改不会更新表单。（点击按钮后，输入中显示的值保持不变）

这是一个plunker。

@Component({
  selector: 'my-app',
  template: `
   <form [formGroup]="myForm">
    <div [formGroupName]="fgn">
        <input [formControlName]="'name'">
    </div>
</form>

<button (click)="formChange()" >Change</button>

{{fgn}}
<br>
{{myForm.value | json}}
  `,
})
export class App {

    private myForm: FormGroup;
    private fgn: String;

    ngOnInit() {
        this.fgn = 'zero';

        this.myForm = this.formBuilder.group({
            zero: this.formBuilder.group({
                name: 'Zero'
            }),
            one: this.formBuilder.group({
                name: 'One'
            })
        });
    }

    formChange() {
        this.fgn = 'one';
    }

    constructor(private formBuilder: FormBuilder) {

    }
}

Answer 1

我会推荐喜欢而不是使用，

<input [formControl]="myForm.controls[fgn].controls['name']">

用，

<form [formGroup]="myForm">
 <div [formGroup]="myForm.controls[fgn]">
  <input [formControlName]="'name'">
 </div>
</form>

原因是，如果您有 n 个输入字段，例如，表单中有超过 25 个字段，则[formControl]="myForm.controls[fgn].controls['name']"在每个字段中应用某种声明并不是一个好习惯，因为这将花费更多时间并且看起来像一场噩梦，如果您想修改任何简单的更改。

相反，如果您使用[formGroup]="myForm.controls[fgn]"，它将[formControlName]自行处理内部。这很有效，因为我在我的项目中使用它。

感谢@Amit 在我心中发起这个想法。

希望这可以帮助。快乐优化编码:)