How to validate child component from parent component without clicking or touching in Angular

Question

I have a child component call app-account included a submit form with some input fields validattors like this

this.user = this.fb.group({
        usrname: new FormControl('', Validators.compose([Validators.required])),
        password: new FormControl('', Validators.compose([Validators.required, Validators.minLength(6)]))});

and in HTML template

<form [formGroup]="user" (ngSubmit)="onSubmit()">

<mat-form-field>
    <input matInput placeholder="Account" formControlName="usrname">
    <mat-error *ngIf="!!user.controls.usrname.errors?.required">{{usrrequire_msg}}
    </mat-error>
</mat-form-field>

<mat-form-field>
    <input matInput type="password" placeholder="Password" formControlName="password">
    <mat-error *ngIf="!!user.controls.password.errors?.required">
        {{pwrequire_qmsg}}
    </mat-error>
    <mat-error *ngIf="!!user.controls.password.hasError('minlength')">
        {{pwminimum_msg}}
    </mat-error>
</mat-form-field>

I embedded this component like a child comp to a parent component HTML

<app-account></app-account>

and in the parent component i have a button to Submit

Layout is load fine but when i click submit button from parent component with any clicking or touching to child input field => Have not any error validate message is display?

How can i resolve it, thanks!

@Swoox yes, i have imported and the template of the child is successfully display in the parent, when i click or touch in child fields then click to other place (don't input anything) the required message is display perfect... But if I submit without any click or touch, no error message show! — trungkmy

trungkmy trungkmy · Accepted Answer · 2019-03-12T09:05:34

Just use [formControl].markAsTouch() with [formControl] is form control from children component... this method will make an action like the use touch or click into this field. Then the validation message is showing.

How to validate child component from parent component without clicking or touching in Angular

1 Answers