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

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

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

因为，我不确定您的对象结构，在这里我假设您的服务返回这样的数据对象 { 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 的这两个函数的更多信息）特定控件会自动传递给它的自定义验证器函数。

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

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

期待特定的 fwdNumber 表单控件。

这样代码更干净可控。希望对您有所帮助。

Answer 2

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

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