Categories
Angular

Angular 7 -Reactive Forms Validation

<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))
    }
}