Angular 2 form validation errors

Question

In angular 2, I want to do client-side validation only after the user has left the field area. This is because when a user enters a field like e-mail or phone, they will always get an error thrown until they've completed typing out their full e-mail, and this is not an optimal user experience.

Currently I have used

address1: ['', Validators.compose([Validators.required, 
              Validators.maxLength(128), Validators.minLength(5)])],

Template:

<div class="addres">
    <label class="form_label asterisk">Address Line 1</label>
    <textarea class="form_input " formControlName="address1"></textarea>
    <div class="error" *ngIf="addDealerForm.controls['address1'].errors && (addDealerForm.controls['address1'].touched)">
        <div *ngIf="addDealerForm.controls['address1'].hasError('required')">
            Address1 is required.
        </div>
        <div *ngIf="addDealerForm.controls['address1'].hasError('maxlength')">
            Exceeded maximum character length.
        </div>
        <div *ngIf="addDealerForm.controls['address1'].hasError('minlength')">
            Enter minimum character length.
        </div>
    </div>
</div>

Help me to how to resolve this issue.

Answer 1

i think you need to set validation on (blur) method. for ex

// component

 onBlur() {
        this.formControl.get(name).setValidators('', [Validators.minLength(3));
    }

// Form

<textarea class="form_input " formControlName="address1" (blur)="onBlur()"></textarea>

does this help

also see this discussion may be help full