MSSE SENG 5199

Course Materials for the MSSE Web Application Development Course

Angular Template Forms & Validation

Adam Keyser


Forms


Main Components


Implementation


Angular Validation

<input type="date">
<input type="number">
<input type="email">
<input type="url">
<input type="checkbox" required>

Other Angular Validation Directives


Validation Requires a Form


Template Reference Variables (#value)


Examples


<input type="text" id="firstName"  #firstName="ngModel"/>

<form name="form" #f="ngForm">
  ...
</form>


Two Way Binding [(x)] (banana-box syntax)

  [ngModel]="model.firstName"
  (ngModelChange)="model.firstName=$event">

NgModel


Example Form With Validation


<form name="form" (ngSubmit)="f.form.valid && saveUser()" #f="ngForm">
  <div class="form-group">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" class="form-control" name="firstName"
      [(ngModel)]="model.firstName" #firstName="ngModel" required/>
  </div>
  <div class="form-group">
    <button class="btn btn-primary">Register</button>
    <a [routerLink]="['/users']" class="btn btn-link">Cancel</a>
  </div>
</form>


Notes about NgModel and Binding

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>
    <p>First name value: </p>
    <p>First name valid: </p>
    <p>Form value: </p>
    <p>Form valid: </p>
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}

Form Validation Variables


Providing Feedback For Validation


Angular Validation CSS Classes


Debugging Classes

<input [(ngModel)]="model.firstName" name="firstName" #firstNameClass>


Define Styles


Example Styles

form .ng-invalid.ng-dirty { background-color: lightpink; }
form .ng-valid.ng-dirty { background-color: lightgreen; }
span.summary.ng-invalid { color: red; font-weight: bold; }
span.summary.ng-valid { color: green; }

Displaying messages


Validation Message Examples


<div class="form-group" [ngClass]="{ 'has-error': f.submitted && !firstName.valid }">
      <label for="firstName">First Name</label>
      <input type="text" id="firstName" class="form-control"
        name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel" required/>
      <div [hidden]="!f.submitted && firstName.valid"
           class="alert alert-danger">
        First name is required
      </div>
</div>


Resetting Form State


Custom Validation


Custom Validation Example


export function BirthdayValidator(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const regex = /[0-2][0-9][0-9][0-9]-[0-1][0-9]-[0-3][0-9]/g;
    const date = control.value;
    if (!date) {
      return null
    }
    const worked = regex.test(date);


    return worked ? null : {'birthday' : 'value must be in yyyy-mm-dd'}
  };
}


Notes about the template form approach


Summary