Angular

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 需要表单控件的名称，但您使用的方式有误 => [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 值更改不会更新表单

Angular - formGroupName value change does not update the form

angular-reactive-forms