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 и объекта данных, получаемого из вашего сервиса, на который вы подписаны, не одинаковы. возможно, данные не имеют одинаковую подпись 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], и нет необходимости передавать значение (смотрите, я не отправляю значение в качестве параметра).

Когда вы обновляете значение поля (вы можете обновить значение из пользовательского интерфейса или с помощью таких функций, как setValue () или patchValue (). Для получения дополнительной информации об этих двух функциях angular реактивная форма см. здесь ) указанный элемент управления c автоматически передается в пользовательскую функцию проверки.

Если вы видите фрагмент кода выше, вы обнаружите, что я не отправлял никаких параметров, но моя реализация метода

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

ожидает определенный fwdNumber элемент управления формы .

Таким образом, код становится более понятным и управляемым. Надеюсь, это поможет.

Answer 2

вместо сохранения в this.userdetails непосредственно передайте в качестве аргумента this.initializeForm(data)

и повторно инициализируйте значение из аргумента данных