Angular 角度形状组重新初始化

在Angular 8中，我有一个表单组，我想用新值重新初始化表单。但是当我第二次执行

fb.build

时，值显示不正确

复选框变为非选中状态，即使它应该被选中，并且输入字段显示

[object object]

<form [formGroup]="myform" novalidate autocomplete="off">
    <mat-checkbox
      formControlName="dndcheckbox"
      [(ngModel)]="userdetails.DoNotDisturb"
    ></mat-checkbox>
    <mat-form-field>
      <input matInput type="text" formControlName="fwdNumber" [(ngModel)]="userdetails.ForwardNumber" />
    </mat-form-field>
</form>

userdetails: MyObject;
myform: FormGroup;
constructor(private fb: FormBuilder,) {}

ngOnInit() {
      this.myService.refreshDataSubject.subscribe((data) => {
        this.userdetails = data;
        this.initializeForm();
      });
}

initializeForm() {
    this.myform = this.fb.group({
      dndcheckbox: ['', ''],
      fwdNumber: [
        {
          value: this.userdetails.ForwardNumber,
        },
        control => validateTelephoneNumber(this.userdetails.ForwardNumber),
      ],
    });
}

userdetails:MyObject；
myform:FormGroup；
构造函数（私有fb:FormBuilder，）{}
恩戈尼尼特（）{
this.myService.refreshDataSubject.subscribe（（数据）=>{
this.userdetails=数据；
这是.initializeForm（）；
});
}
initializeForm（）{
this.myform=this.fb.group({
dndcheckbox:[''，]，
FWD编号：[
{
值：this.userdetails.ForwardNumber，
},
control=>validateTelephoneNumber（this.userdetails.ForwardNumber），
],
});
}

---

可能出现什么问题？

而不是存储在

this中。userdetails

直接作为参数传递给

this。initializeForm（数据）

---

并重新初始化数据arugument中的值

我认为问题出在您的数据中。userdetails对象的结构与来自您订阅的服务的数据对象的结构不同。可能是数据没有相同的userdetails签名。控制台检查它是否正常

附加：每次数据更改时，您都在创建表单，但此处仅更改值，而不更改表单框架。因此，我认为您只能创建表单一次，并且当数据更改时，只需使用来自您的服务的新值更新表单

因为，我不确定您的对象结构，这里我假设您的服务返回如下数据对象 {IsDndChecked:true，ForwardNumber:'123245'}

在这里，

ngOnInit（）

我调用方法

initializeForm（）

来创建表单。我正在构建表单一次，当调用数据更改

updateFormValue（）

来更新表单的值时

另一件事，您可以这样设置验证器函数

fwdNumber:[''，this.validateTelephoneNumber]

，并且不需要传递值（看，我没有将值作为参数发送）

当您更新字段的值时（您可以从UI或使用诸如setValue（）或patchValue（）之类的函数更新值。有关这两个函数的详细信息，请参阅此表单），特定控件将自动传递给其自定义验证器函数

如果您看到上面的代码片段，您会发现我没有发送任何参数，只发送了我的方法实现

validateTelephoneNumber(control: AbstractControl) {
    alert(control.value);
  }

需要特定的fwdNumber表单控件

---

通过这种方式，代码更加清晰和可控。希望有帮助。

这有什么不同？请使用{{userdetails | json}this检查您在HTML中存储的响应。可能JSON循环不同，我已经检查了userdetailsTry的响应，将userdetails类型从MyObject更改为any，并像这样调用该值。userdetails['ForwardNumber']检查控制台了吗？是否收到任何错误？

validateTelephoneNumber(control: AbstractControl) {
    alert(control.value);
  }