Angular格式组重新初始化

Question

在Angular 8中，我有一个Form组，我想在其中使用新值重新初始化表单。但是，当我第二次执行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),
      ],
    });
}

可能出什么问题了？

Answer 1

而不是存储在this.userdetails中作为参数直接传递给this.initializeForm(data)

并从数据参数中重新初始化值

Answer 2

我认为问题出在您的数据中。您的userdetails对象的结构与来自您所订阅服务的数据对象的结构不同。可能是数据没有相同的用户详细信息签名。对其进行控制台以检查是否正常。

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

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

  ngOnInit() {
    this.initializeForm();

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

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

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

  updateFormValue(data: any) {
    this.myform.setValue({
      dndcheckbox: data.IsDndChecked,
      fwdNumber: data.ForwardNumber
    });
  }

在ngOnInit()内部，我调用方法initializeForm()创建表单。我正在构造一次表单，当调用数据更改updateFormValue()以更新表单的值时。

[另一件事，您可以通过fwdNumber: ['', this.validateTelephoneNumber]这样的方式设置验证器函数，而无需传递值（看起来我没有将值作为参数发送）。

当您更新字段的值时（可以从UI或使用setValue（）或patchValue（）之类的函数来更新值。有关这两个角反应形式see here的函数的更多信息，）该特定控件会自动传递为其自定义验证器功能。

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

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

期待特定的fwdNumber表单控件。

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