<label class="label-control">Username*</label> <input type="text" autocomplete="new-password" formControlName="username" class="form-control" (blur)="verifyUsername($event.target.value)" minlength="1" maxlength="20"> <div *ngIf="editAuthenticationform.controls['username'].invalid && (editAuthenticationform.controls['username'].dirty || editAuthenticationform.controls['username'].touched)" class="error formError"> <div *ngIf="editAuthenticationform.controls['username'].errors.required">Username is required.</div></div>
import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; // import custom validator to validate that password and confirm password fields match import { MustMatch } from './_helpers/must-match.validator'; @Component({ selector: 'app', templateUrl: 'app.component.html' }) export class AppComponent implements OnInit { registerForm: FormGroup; submitted = false; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.registerForm = this.formBuilder.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], email: ['', [Validators.required, Validators.email]], password: ['', [Validators.required, Validators.minLength(6)]], confirmPassword: ['', Validators.required] }, { validator: MustMatch('password', 'confirmPassword') }); } // convenience getter for easy access to form fields get f() { return this.registerForm.controls; } onSubmit() { this.submitted = true; // stop here if form is invalid if (this.registerForm.invalid) { return; } alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.registerForm.value)) } }