Question

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

@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

不确定为什么它不能与formControlName方法一起使用。

这似乎有效：

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

<强>更新：

您可以将此解决方法用于AOT：

<input [formControl]="myForm.get(fgn + '.name')" />

（这被认为是一种解决方法，因为这会经常调用get方法）

Answer 2

你做错了。正确的代码将是：

<form [formGroup]="myForm">
    <div>
        <input [formControl]="myForm.controls['zero'].controls['name']">
        {{myForm.controls['zero'].controls['name'].value}}
    </div>
</form>

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

{{fgn}}
<br>
{{myForm.value | json}}

<强>解释

formControlName需要表单控件的名称，但您使用的方式错误=＆gt; [formControlName]。当您传递表单控件对象而不是表单控件的名称时，则使用[formControl]。希望这会有所帮助

Answer 3

我建议您不要使用

<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在我体内发起这个想法。

希望这会有所帮助。快乐的优化编码：）

Answer 4

就我而言，我已经通过以下方式解决了它：我从按钮中删除了 (click)="saveItem()"，而是在表单中添加了 (submit)="saveItem()"。而且我必须在表单中添加一个 ID，并在按钮中引用它。

<form
      id="myform"
      [formGroup]="myGroup"
      (submit)="saveItem()"
    >
   ....
   </form>

   <button type="submit" form="myform">SAVE</button>

Angular - formGroupName值更改不更新表单

4 个答案: