Angular template-driven form validation with multiple fields

Question

Suppose I have this simple form with some fields (Stackblitz example):

@Component({
  selector: 'my-app',
  template: 
`
<h1>AppComponent</h1>

<form>
  <h2>UserData</h2>
  <userdata [user]="model.userData"></userdata>

  <h2>Actions</h2>
  <actionbar ></actionbar>
</form>
`,
})
export class AppComponent  { ... }

@Component({
  selector: 'userdata',
  template: 
`
<span class="status {{name.status}}">{{name.status}}</span>
full name:
<input name="name" #name="ngModel" pattern="^.* .*$" required [(ngModel)]="user.name">
<br>

<h3>--- Contacts ---</h3>

<span class="status {{email.status}}">{{email.status}}</span>
email:
<input name="email" #email="ngModel" type="email" [email]="true" [(ngModel)]="user.contacts.email">
<br>


<span class="status {{phone.status}}">{{phone.status}}</span>
phone:
<input name="phone" #phone="ngModel" pattern="^[0-9]*$" [(ngModel)]="user.contacts.phone">
<br>


<h4>---- Address ----</h4>

<span class="status {{street.status}}">{{street.status}}</span>
street:
<input name="street" #street="ngModel" [(ngModel)]="user.contacts.address.street">
<br>

<span class="status {{city.status}}">{{city.status}}</span>
city:
<input name="city" #city="ngModel" [(ngModel)]="user.contacts.address.city">
<br>

<span class="status {{zipcode.status}}">{{zipcode.status}}</span>
zipcode:
<input name="zipcode" #zipcode="ngModel" pattern="^[0-9]{5}$" [(ngModel)]="user.contacts.address.zipcode">
<br>

`,
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
})
export class UserDataComponent  {
  @Input() user: any;
}

@Component({
  selector: 'actionbar',
  template: 
`
<span class="status {{form.status}}">{{form.status}}</span>
<input type="button" value="Submit" [disabled]="form.invalid">
`,
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
})
export class ActionBarComponent { ... }

(basically a form with fields for full name and contact information such as email, phone, address)

Note that one can only submit the form if it is valid. The form is valid only if everything nested inside it is valid.

For validations over a single field, it is rather easy to do (those fields already have some, like regex patterns and requiredness).

Now I want to add two other business requirements:

at least one contact information (email, phone or address) is required;
if any field in address is set, then all of them (street, city, zipcode) are required.

Is it possible to even do it in template-driven forms?

rslemos · Accepted Answer · 2018-05-17 03:37:10Z

This is how I've managed to implement the validation group-wise (Stackblitz Example).

(for the snippets I've pasted below, ellipsis in parenthesis indicate that the parts were omitted for the sake of clearness; refer to the stackblitz example above for full contents)

For each group, I've added a wrapping element (I think it could also be <ng-container>, though didn't test it) just to bear an ngModelGroup directive:

<div ngModelGroup="contacts" (...) >

<h3>--- Contacts ---</h3>

email: (...input...)
phone: (...input...)

<div ngModelGroup="address" (...) >

<h4>---- Address ----</h4>

street: (...input...)
city: (...input...)
zipcode: (...input...)

</div>

</div>

Now each of these new ngModelGroup can have validators attached. Since these validations are so ad-hoc, I felt they wasn't worth of a truly reusable implementation, all I need was validation functions (pasting here just one of them; the other is pretty straight forward and you can always refer to the stackblitz):

  ifOneThenFullAddress(c: AbstractControl): ValidationErrors | null {
    let value = c.value;

    let street = value && value.street;
    let city = value && value.city;
    let zipcode = value && value.zipcode;

    if ((street && city && zipcode) || (!street && !city && !zipcode))
      return null;

    return { ifOneThenAll: '' };
  }

(this code was implemented inside UserDataComponent)

Now to make angular form engine call my functions I had to implement a Validator, but a generic one (that will hand validation over to a function):

@Directive({
  selector: '[fn-validate]',
  providers: [{provide: NG_VALIDATORS, useExisting: FnValidateDirective, multi: true}]
})
export class FnValidateDirective implements Validator {
  @Input('fn-validate') fn: (c: AbstractControl) =>  ValidationErrors | null;

  validate(c: AbstractControl): ValidationErrors | null {
    return this.fn(c);
  }
}

To use it (and bind my validating functions) I had to change the group's elements to:

<div ngModelGroup="contacts" [fn-validate]="atLeastOneContact">
<div ngModelGroup="address" [fn-validate]="ifOneThenFullAddress">

And voilà, the group as a whole got validated by my ad-hoc functions.

Antoniossss · Accepted Answer · 2018-05-16 20:10:53Z

0

It is possible but it is unpractical as code becomes obfuscated.

Condition 1:

<input [required]=!(somefielf1 || somefield2 || somefield3 ... etc )>

and for every input different condition must be met. Input will be required if none of inputs are filled.

Condition 2:

the same here only the other way around - without negation

<input name="city" [required]="zipCode || street || whatever else|| ..."/>

input will be required, if one of provided fields is not empty.

It would be much more easier for you to do this with reactive forms. Conditions would be preatty much the same, but will be easier to read, maintain and change.

answered May 16, 2018 at 20:10

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

2 Comments

rslemos Over a year ago

That will certainly work, but... each field will flag an error (a required error). I'd rather have a single error "at least one contact must be provided" or "you must enter full address details". I was wondering if I can attach validation code to "ngModelGroup".

Antoniossss Over a year ago

It would be the same, just use *ngIF on error message.

Collectives™ on Stack Overflow

Angular template-driven form validation with multiple fields

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related