Form validations with ngModel and ngModelOption in angular 8

Question

I'm using angular 8 with formGroup and formController for validation which works great through reactive as well as template-driven form. However, I was trying to use "ngModel" in angular 8 with "ngModelOptions" attributes (it's a dynamically generated fields). It shows field level validations correctly with "required" attribute, but I'm unable prevent button click or disable the "button" on error validation state. A sample code is given below:

<form [formGroup]="myForm" #form1="ngForm">
 <!-- few formControlName fields here -->
<mat-form-field>
   <input matInput [(ngModel)]="firstname" [ngModelOptions]="{standalone: true}" [placeholder]="First name" required />
   <mat-error>This field is <strong>required</strong></mat-error>
</mat-form-field>
<mat-form-field>
   <input matInput [(ngModel)]="lastname" [ngModelOptions]="{standalone: true}" [placeholder]="Last name" required />
   <mat-error>This field is <strong>required</strong></mat-error>
</mat-form-field>
<button mat-button [disabled]="!(form1.form.valid)">Submit</button>
</form>

Submit button never disabled in spite of the blank first name and last name fields. I understand When you mark it as standalone: true this will not happen (it will not be added to the FormGroup). But is there any workaround or other approaches where I can achieve the ngModel validations to restrict the form submission on the button?

Would you check this link: https://stackoverflow.com/questions/43270564/dividing-a-form-into-multiple-components-with-validation/43277336 — Sarath Mohandas, Feb 04 '20 at 04:45

score 2 · Accepted Answer · answered Feb 04 '20 at 08:22

if you put in the same tag

<form [formGroup]="myForm" #form1="ngForm">

"form1" is myForm, and "firstName" and "lastName" don't belong to myForm.

if you use

[ngModelOptions]="{standalone: true}"

your input don't belong to any form.

You can add in your inputs #firstnameID="ngModel" and #lastnameID="ngModel" and ask about firstnameID.valid and lastnameID.valid

<form [formGroup]="myForm" #form1="ngForm">
 <!-- few formControlName fields here -->
<mat-form-field>
   <input matInput [(ngModel)]="firstname" 
        #firstnameID="ngModel"
        [ngModelOptions]="{standalone: true}" 
        placeholder="First name" required />
   <mat-error>This field is <strong>required</strong></mat-error>
</mat-form-field>
<mat-form-field>
   <input matInput [(ngModel)]="lastname" 
       #lastnameID="ngModel"
       [ngModelOptions]="{standalone: true}" 
       placeholder="Last name" required />
   <mat-error>This field is <strong>required</strong></mat-error>
</mat-form-field>
<button mat-button [disabled]="!(myForm.valid) ||
                               !firstnameID.valid ||
                               !lastnameID.valid">Submit</button>
</form>

NOTE: I suppose it's not the answer you expect but it's in this way

Template-Driven Form validation follows this pattern of assigning a template variable to input bind with ngModel and that reference can be utilize to add validations (valid, pristine etc). — varundhariyal, Feb 04 '20 at 08:35
This looks a good work around considering my requirements to have both fonrControlName as well as ngModelOptions. Thanks! — SatAj, Feb 06 '20 at 21:31
How do you handle ngFor ? For instance a list of contacts for an address. The button must be enabled only if all the controls in the array are valid — Marc Roussel, Nov 25 '21 at 16:06

Form validations with ngModel and ngModelOption in angular 8

1 Answers1