Reputation: 830
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
Upvotes: 1
Views: 2216
Reputation: 27471
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() {}
}
Upvotes: 1