How to use child components in angular reactive forms?

Question

In my Angular 11.2.6 project, I have a form with three child components, all of which take user inputs.

I want to attach formControls to all of these child components and make the formGroup in my parent component. But I don't know how to bind the inputs in my child components to the formgroup in my parent component.

This is my parent component html:

<form class="form__main" (ngSubmit)="onSubmit()">
  <h2>{{ 'choose_cryptocurrency' | translate }}</h2>

  <currency-selector></currency-selector>

  <coin-amount-input></coin-amount-input>

  <button class="button__submit--order" mat-raised-button color="primary">
    {{ 'submit_order' | translate }}
  </button>
</form>

and this is my parent component ts:

exchangeBuyForm = new FormGroup({
    buyingCoin: new FormControl(''),
    payingCoin: new FormControl(''),
  });

and this is my child component html (coin amount input):

<div class="wrapper__input">
  <mat-label>input currency</mat-label>
  <mat-form-field class="input__currency" appearance="fill">
    <input
      type="text"
      name="formattedNumberInput"
      class="mat-input-element"
      #formattedNumberInput
      [ngModel]="formattedValue"
    />
  </mat-form-field>
</div>

Please note that I only added one of the child components here for increased readability. I assume all of them work the same.

Answer 1

if i understand well your purpose, i think you have to avoid ngModel, and create a FormGroup in all of child components, and you can use change hook to emit the value of the child component form to the parent.

i'll write using formBuilder of angular, .

child.component.html

<form [formGroup]="form"
  <div class="wrapper__input">
    <mat-label>input currency</mat-label>
    <mat-form-field class="input__currency" appearance="fill">
      <input
        type="text"
        name="formattedNumberInput"
        class="mat-input-element"
        (change)="emitFormValue()"
        #formattedNumberInput
        formControlName="numberInput"
      />
    </mat-form-field>
  </div>
</form>

child.component.ts

formValue = new EventEmitter<any>()

constructor(private fb: FormBuilder) {}

form = this.fb.group({
  numberInput: ['']
})

ngOnInit() {}

emitFormValue() {
  this.formValue.emit(this.form.value)
}

then in your parent component you can handle the emitted value and set the form control

parent.component.html

<form class="form__main" (ngSubmit)="onSubmit()">
  <h2>{{ 'choose_cryptocurrency' | translate }}</h2>

  <currency-selector (formValue)="onFormvalue($event)"></currency-selector> //assuming this is the child component

  <coin-amount-input></coin-amount-input>

  <button class="button__submit--order" mat-raised-button color="primary">
    {{ 'submit_order' | translate }}
  </button>
</form>

parent.component.ts

constructor(private fb: FormBuilder) {}

form = this.fb.group({
  numberInput: [''],
  otherField: [''],
})

ngOnInit() {}

onFormValue($event) {
  let value = $event
  let keys=Object.keys(value)
  keys.foreach(key => {
  this.form.get(key).setValue(value[key])
}

i think this should work, hope this will help you