Reactive Forms and @Input

Question

I want to make Reactiev Form with the values taken from other Component. To pass data to Component I use @Input.

For example:

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]],
... }
}

I want to see in HTML the form with data passed in Input.

Is it possible? Where should I pass the data to Form?

New code, after your hints:

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');
    }
}

First condition is not true. Second one, I get the error: ERROR TypeError: Cannot read property 'firstChange' of undefined.

Next code:

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

What I get is: "ERROR TypeError: Cannot read property firstName of undifined."

It looks like the Input happens after such changes.

Next code:

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

And unluckily I get an information that it is undefined. So it does not work as it should.

Answer 1

you can use these method patchValue , setValue , reset

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

   this.myForm.patchValue(this.dataToPass);

}

using patchValue or reset method will not throw an error if you don't pass data to all controls

Updated!! ⚡⚡

  ngOnChanges(changes: SimpleChanges) {

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

  }

this ngOnChanges will keep track of the dataToPass object has changes, but not object properties, you need to set the binding object to new object every time you update any proprty,to trigger change detection from parent component

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

demo

Answer 2

You can either pass the whole FormGroup as input, like @Input myForm: FormGroup or you can pass an object that contains the data you want and patch them to your form.

For example, let's assume the form below,

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

and an Object like

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

you can then pass this object to @Input @Input myData: {name:string,surname:string}; and then patch your form like so

this.myForm.patchValue(myData);