Currently, I am working on creating a searchable-dropdown component that I intend to use in multiple components. However, I am facing an issue with binding form validation to this component.
For instance, I have a form for creating a user and I need to bind the validation of one field to the searchable-dropdown component.
private createForm(): void {
this.courseAddForm = this.formBuilder.group({
name: ['', [
Validators.required,
Validators.maxLength(this.val.maxLen.title)
]],
roleId: ['', Validators.compose([Validators.required])]
});
}
I am trying to bind the validation for the roleId field in this component:
<div class="col-lg-6 kt-margin-bottom-20-mobile">
<kt-searchable-dropdown [formGroup]="courseAddForm" [formcontrolName]="'roleId'"
(selectedId)="selectedCourse($event)" [formTitle]="'COURSE.COURSE_GROUP'">
</kt-searchable-dropdown>
</div>
I attempted the following code to find validation of this form for roleId but it did not work for me:
@Input() url: string;
@Input() formTitle: string;
@Input() ItemId: number;
@Input() formcontrolName: string;
@Input() formGroup: FormGroup;
@Input() control: FormControl;
@Output() selectedId = new EventEmitter<number>();
fieldErrors(field: string): any {
let controlState = this.formGroup.controls[field];
return (controlState.dirty || controlState.touched) ? controlState.errors : null;
}
HTML :
<div class="col-lg-12 mt-4 kt-margin-bottom-20-mobile">
<mat-form-field class="mat-form-field-fluid" appearance="outline">
<mat-label>{{'GENERAL.TITLE' | translate}} *</mat-label>
<input [formControlName]="formcontrolName" (keyup)="getValues($event.target.value)" matInput
[placeholder]="'GENERAL.TITLE' | translate">
<span *ngIf="fieldErrors(formcontrolName)" class="text-right">
<label *ngIf="fieldErrors(formcontrolName).required">WORKED</label>
</span>
</mat-form-field>
</div>
How can I resolve this problem?