Реактивные формы и @Input

Question

Я хочу сделать Реактиев Форму со значениями, взятыми из другого Компонента.Для передачи данных в Компонент я использую @ Input.

Например:

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  ...
})
export class GetData implements OnInit {
  @Input() dataToPass: DataOne;
  myForm: FormGroup;

ngOnInit() {
    this.myForm = this.fb.group({
    name: ['', [Validators.required]],
... }
}

Я хочу видеть в HTML форму с данными, переданными во Input.

Is itвозможно?Куда мне передавать данные в форму?

Новый код, после ваших подсказок:

ngOnChanges(changes: SimpleChanges) {
    console.log(changes);

    if (changes['this.dataToPass'] && changes['this.dataToPass'].currentValue) {
      console.log('change');
    }

    if (changes['this.dataToPass'].firstChange === true) {
      console.log('Change is seen');
    }
}

Первое условие неверно.Во-вторых, я получаю сообщение об ошибке: ОШИБКА TypeError: Невозможно прочитать свойство 'firstChange' из неопределенного.

Следующий код:

if (changes['dataToPass'].firstChange && changes['dataToPass']) {
      console.log('Change is seen');
      console.log(this.dataToPass.firstName);
}

Что я получаю: "ОШИБКА TypeError: Невозможно прочитать свойствоfirstName of undeifined. "

Похоже, что ввод происходит после таких изменений.

Следующий код:

if (changes['dataToPass'].firstChange && changes['dataToPass']) {
      console.log('Change is seen');
      console.log(this.dataToPass);
}

И, к несчастью, я получаю информацию, что он не определен.Так что это не работает так, как должно.

Answer 1

вы можете использовать эти методы patchValue, setValue, reset

ngOnInit() {
    this.myForm = this.fb.group({
    name: ['', [Validators.required]],
     ... 
    });

   this.myForm.patchValue(this.dataToPass);

}

с использованием метода patchValue или reset не выдаст ошибку, если вы не передадите данные всемэлементы управления

Обновлено!101

  ngOnChanges(changes: SimpleChanges) {

    if (changes.dataToPass && changes.dataToPass.currentValue){
      this.myForm.patchValue(changes.dataToPass.currentValue)
    }

  }

этот ngOnChanges будет отслеживать изменения объекта dataToPass, но не свойства объекта, вам необходимо устанавливать объект привязки для нового объекта каждый раз, когда вы обновляете любойproprty, для запуска обнаружения изменений из родительского компонента

this.userData = {...this.userData};

demo mo

Answer 2

Альтернатива ngOnInit

Если вы хотите по-настоящему реагировать, например, интегрировать шаблон управления состоянием Redux, такой как NgRx, с реактивными формами, тогда можно использовать ngOnChanges().

ngOnChanges() сначала запускается до ngOnInit(), который вызывается только один раз.

Затем запускается при каждом изменении ввода.

При этом вам необходимо выполнить вашу формусоздание раньше в конструкторе, а не в ngOnInit()

Если все ваши входные данные являются неизменяемыми, тогда также используйте стратегию обнаружения изменений OnPush для повышения производительности.

@Component({
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SomeComponent implements OnChanges {
  formGroup: FormGroup;
  @Input() dataToPass: DataOne;

  constructor(private fb: FormBuilder) {
    this.buildForm();
  }

  ngOnChanges(changes: SimpleChanges) {
    // Respond when Angular (re)sets data-bound input properties.
    // The method receives a SimpleChanges object of current and previous property values.
    // Called before ngOnInit() and whenever one or more data-bound input properties change.

    if (changes['dataToPass'] && changes['dataToPass'].currentValue) {
      this.formGroup.patchValue(this.dataToPass);
    }
    // `changes` has additional methods such as isFirstChange()
  }

  private buildForm() {
    this.formGroup = this.fb.group({
      ...etc
    });
  }
}

Сделайте ваши формы глупымикомпоненты, которые не знают ничего, кроме как обрабатывать ввод, проверять форму и отправлять данные формы.Оберните их в контейнерный компонент, который получает данные, которые вы исправляете, на форму и обрабатывает отправленные данные формы.Для более динамичных форм с подписками на изменения значений вы можете даже продолжать отправлять данные формы при отладке и решать, как обрабатывать события в контейнере.

Answer 3

Вы можете либо передать всю группу FormGroup в качестве входных данных, например @Input myForm: FormGroup, либо передать объект, содержащий нужные данные, и добавить их в форму.

Например, предположим, что форма ниже,

this.myForm = this.fb.group({
    name: ['', [Validators.required]],
    surname: ['', [Validators.required]],
    age: ['', [Validators.required]],
       ...
   })

и объект типа

{
  name: 'John',
  surname: 'Black'
}

вы можете затем передать этот объект в @Input @Input myData: {name:string,surname:string}; и затем пропатчить свою форму следующим образом

this.myForm.patchValue(myData);