Below form(using Clarity Forms) is a part of a dialog:
<form clrForm
clrLayout="horizontal"
[formGroup]="editRecipientForm">
<clr-input-container>
<label>First Name</label>
<input clrInput
type="text"
formControlName="firstName" />
<clr-control-error>Field cannot be empty</clr-control-error>
</clr-input-container>
<clr-input-container>
<label>Last Name</label>
<input clrInput
type="text"
formControlName="lastName" />
<clr-control-error>Field cannot be empty</clr-control-error>
</clr-input-container>
</form>
which opens with the help of the following function:
onEditRecRow() {
this.editRecipientForm = new FormGroup({
ID: new FormControl({value: this.recSelectedList[0].ID, disabled: true}, Validators.required),
firstName: new FormControl(this.recSelectedList[0].firstName, Validators.required),
lastName: new FormControl(this.recSelectedList[0].lastName, Validators.required),
emailID: new FormControl(this.recSelectedList[0].emailID, [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")])
});
this.editRecipientDialog = true
}
Clarity helps me to prompt error messages if any Form Control is invalid.
I also wanted all Form Controls to be checked again once I save all my changes made in dialog, which I am doing in the following way:
@ViewChild('ClrForm', {static: true}) clrForm;
.
.
.
onUpdateRecipient() {
if (this.editRecipientForm.invalid) {
this.clrForm.markAsTouched();
console.log('Error There');
} else {
console.log('Recipient Updated');
}
}
But @ViewChild
is returning clrForm
as undefined.
Thanks.
Try
@ViewChild(ClrForm, {static: true}) clrForm;
remove '
(single quotes) from the statement of @ViewChild
import {ClrForm} from '@clr/angular';
Could it be you're not referencing clrForm properly on your template?
Try <form #ClrForm clrLayout="horizontal" [formGroup]="editRecipientForm"> <clr-input-container>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.