Topic: Form Validation
MDB 8.0.0
I'm trying to make a simple form and add a validation on it, but something is working wrong.
<form class="text-center"
[formGroup]="form"
autocomplete="off"
(ngSubmit)="submit()">
<div class="md-form">
<input type="text"
id="name"
class="form-control"
formControlName="name"
mdbInput
mdbValidate>
<label for="name">Name</label>
</div>
<button mdbBtn
color="info"
outline="true"
rounded="true"
block="true"
class="my-4 waves-effect z-depth-0"
mdbWavesEffect
type="submit">Registration</button>
and
export class RegisterComponent {
form!: FormGroup;
constructor(private readonly formBuilder: FormBuilder) {
this.buildForm();
}
submit(): void {
console.log('submit', this.form);
}
private buildForm(): void {
this.form = this.formBuilder.group({
name: ['', [Validators.required, Validators.maxLength(36)]]
}, { updateOn: 'submit' });
}
}
If I use this buildForm code, validation doesn't work.1. When I click Registration button, the Name control doesn't change color to red2. Also the Name control doesn't change color if I select it and then the control loses focus3. The Error property in the FormGroup is always null
If remove { updateOn: 'submit' }, from the code step 2 works correctly, but not step 1 and 3.
How to show all errors (change color to red) after submit button click?
And also please add new version of MDB to "Specify MDB Version" dropdown.
Thanks
Arkadiusz Idzikowski staff answered 5 years ago
To resolve problem with 'onSubmit' updates, please mark your control as touched on button click:
submit(): void {
this.form.controls.name.markAsTouched();
console.log('submit', this.form);
}
Step 1 won't work without that as well, because the control is not touched or dirty on button click, unless you use the input. For step 3 please take a look at the errors of specific control, not global form parameter.
We will update the documentation for similar cases.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.4
- Device: PC
- Browser: Chrome v75.0.3770.100
- OS: Windows 10
- Provided sample code: No
- Provided link: No