I have a question regarding a form with an angular 2 template. I created one of these forms, and I would like to give the user a warning if one entry in the form group is invalid.
For example, let's say I have the following view:
<form class="form" #f="ngForm" (submit)="submit()"> <div class="form-group"> <input type="text" name="firstName" required [(ngModel)]="user.firstName"> <input type="text" name="lastName" required [(ngModel)]="user.lastName"> </div> <div class="form-group"> <input type="text name="address" required [(ngModel)]="user.address"> </div> <button type="submit" [disabled]="!f.valid">Submit</button> </form>
I would like the entire form group to contain the input "firstName" and enter "lastName" to change if the value of firstName and / or lastName is invalid. I know I can do something like this:
<div class="form-group" [class.has-error]="!firstName.valid || !lastName.valid"> <input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel"> <input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel"> </div>
Everything will be fine. But here is the hard part: in this example, I have only two inputs with a simple validation rule, so it is easy to verify and read it. But what if I have 10 input to validate in a form group? I do not want to manually verify the validity of each input.
One solution I found is to create a subformat inside the first:
<form class="form" #f="ngForm" (submit)="submit()"> <form #subForm="ngForm" [class.has-error]="!subForm.valid"> <input type="text" name="firstName" required [(ngModel)]="user.firstName"> <input type="text" name="lastName" required [(ngModel)]="user.lastName"> </form> <div class="form-group"> <input type="text name="address" required [(ngModel)]="user.address"> </div> <button type="submit" [disabled]="!f.valid || subForm.valid">Submit</button> </form>
Here is the plunker I created to illustrate: an example of form validation
But I find it pretty ugly, and I can check two forms to see if there are any problems. So finally, my question is: can I set the div as angular 2 ngForm to be able to check multiple inputs at the same time? Basically, is there a better way to do this validation than creating a subform? Something like this, for example:
<div class="form-group" #names [class.has-error]="!names.valid"> <input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel"> <input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel"> </div>
PS: I know that using a function is another solution, but it has the same disadvantages: you have to manually check each input, depending on the verification rule, it can become quite complicated, plus you lose one of the advantages of using a form with a template instead of reactive.