angular can't use formControlName on child component

Question

I have a child component that contains input tag I need to set formControlName in the parent but I got an error

child.html

 <form [formGroup]="formGroupName">
      <div class="input">
        <input type="text" [formControlName]="formControlName" />
        <span class="label">{{ label }}</span>
      </div>
 </form>

child.ts

export class FactorComponent implements OnInit {
  @Input("label") label: string;
  @Input("formControlName") formControlName: string;
  @Input("formGroupName") formGroupName: string;

  constructor() {}

  ngOnInit() {}
}

parent.html

<form [formGroup]="form" (ngSubmit)="onCalcute()">
      <div class="child" >
        <div class="estimate-part">
              <ng-container *ngFor="let factor of allFactors">
                <otk-factor
                  [label]="factor?.label"
                  [formControlName]="factor?.id"
                  [formGroupName]="form"
                ></otk-factor>
              </ng-container>
        </div>
      </div>

        <div class="btn-row">
          <button class="calcute" type="submit">estimate</button>
        </div>
</form>

parent.ts

export class GamificationComponent implements OnInit {
  @Input("rooms") rooms: HostRoomInfoModel;
  @Input("roomSelected") roomSelected;
  @Input("roomId") roomId: number;

  showCalcuteBorder: boolean = false;
  form: FormGroup;

  allFactors = [
    {
      id: "price",
      label: "تومان",
      selected: false
    },
    {
      id: "discount",
      label: "درصد",
      selected: false
    },
    {
      id: "response",
      label: "درخواست",
      selected: false
    },
    {
      id: "viewCount",
      label: "رزرو",
      selected: false
    },
    {
      id: "acceptance",
      label: "نفر",
      selected: false
    }
  ];

  constructor(private estimationService: EstimationService) {
    this.form = new FormGroup({
      price: new FormControl(null),
      discount: new FormControl(null),
      response: new FormControl(null),
      viewCount: new FormControl(null),
      acceptance: new FormControl(null)
    });
  }

  ngOnInit(): void {}

  onCalcute() {
    this.showCalcuteBorder = true;
    console.log(this.form.value);
  }

and got this error also got form value enter image description here

actually I use reactive-form and I want to use input tag as a child component but it seems can't find their value from the parent

formControlName is, unfortunately, not something you can forward to a child component by databinding inputs. The only way to make this work is to convert FactorComponent into a custom form control. — Aluan Haddad

Chellappan வ Chellappan வ · Accepted Answer · 2020-07-11T06:49:47

Since formControlName & formControlName already reserved selector by angular, Don't use that name, change input property binding name something like this.

child.component.ts

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

@Component({
  selector: 'otk-factor',
  templateUrl: './otk-factor.component.html',
  styleUrls: ['./otk-factor.component.css']
})
export class OtkFactorComponent implements OnInit {
  @Input("label") label: string;
  @Input() controlName;
  @Input() groupName;

  constructor() {}

  ngOnInit() {}


}

Working Example

angular can't use formControlName on child component

1 Answers