vitalyv pro asked 4 years ago


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 4 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.


vitalyv pro commented 4 years ago

Hi Arkadiusz,

Thank you very much for you answer!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: 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