Angular 表格组重新初始化

Question

在 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),
      ],
    });
}

可能出了什么问题？

Answer 1

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

并重新初始化数据参数的值

Answer 2

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

附加：每次数据更改时您都在创建表单，但这里仅更改值而不更改表单骨架。因此，我认为您只能创建一次表单，当数据发生变化时，只需使用来自您的服务的新值更新表单即可。

As, I am not sure about your object structure, Here I assume your service returns data object like this { 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() 等函数更新值。有关 angular 这两个函数的更多信息反应形式 see here) 特定控件自动传递给其自定义验证器函数。

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

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

期待特定的 fwdNumber 表单控件。

这样代码更加简洁可控。希望对你有帮助。

Angular 表格组重新初始化

Angular Form Group reinitialize

angular

angular-forms

angular2-formbuilder