I'm building a custom address component. I'm using it in a component:
consumer.component.html:
<form [formGroup]="form">
<nt-address [parent]="form" fG="addrGrp" formControlName="addrGrp"></nt-address>
{{form.value | json}}
</form>
consumer.component.ts
data = {
addr1: 'Sample Address Line 1'
};
ngOnInit() {
this.form = this.fb.group({
addrGrp: this.fb.group(this.data)
})
}
nt-address.component.html:
<div [formGroup]="parent">
<div [formGroupName]="fG">
<md-input-container>
<input mdInput type="text" formControlName="addr1" placeholder="Address Line 1">
</md-input-container>
</div>
</div>
nt-address.component.ts:
export class AddressComponent extends ValueAccessorBase<any> {
@Input() parent: FormGroup;
@Input() fG: FormGroup;
}
I'm getting this error:
TypeError: control.registerOnChange is not a function
A FormArray aggregates the values of each child FormControl into an array. It calculates its status by reducing the status values of its children. For example, if one of the controls in a FormArray is invalid, the entire array becomes invalid.
FormControlName is used to sync a FormControl in an existing FormGroup to a form control element by name.
Control Value Accessor is an interface that provides us the power to leverage the Angular forms API and create a communication between Angular Form API and the DOM element. It provides us many facilities in angular like we can create custom controls or custom component with the help of control value accessor interface.
If you're using form group along from array then you may get you may get this error 'control register on change is not a function'.
I used initially like this -
<div class="btn-group" dropdown [insideClick]="true">
<button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic" [ngClass]="{ 'invalid': hasFieldError('jobTitle') }">
<span class="required">*</span> Select jobTitle <i class='dropDownIcon fas fa-angle-down'></i>
</button>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic" >
<li *ngFor="let item of jobTitleList" role="menuitem">
<input type="checkbox" (change)="onTagValueChange(item, 'jobTitle', $event.target.checked)" [checked]="tagSelected(item, 'jobTitle')" formArrayName="jobTitle"> {{ item }}
</li>
</ul>
</div>
<input type="checkbox" (change)="onTagValueChange(item, 'jobTitle', $event.target.checked)" [checked]="tagSelected(item, 'jobTitle')" formArrayName="jobTitle"> {{ item }}
use formArrayName instead of fromControlName to solve this issue.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With