Template Driven Form Validation of component inside Form

Question

I am trying to validate a component inside a form

  <form #f="ngForm" novalidate (ngSubmit)="submitForm()">
    <app-form-component [f]="f" [model]="model" ></app-form-component>
    <button>Submit</button>
  </form>

Form component:

         <input type="number"
                   #test="ngModel"
                   name="test"
                   required
                   [ngClass]="{ 'is-invalid': f.submitted && test.invalid }"
                   [(ngModel)]="model">

When I submit the form I get an error in my Input Filed but the function submitForm is still called.

Answer 1

<form #f="ngForm" novalidate (ngSubmit)="CheckModelValid()?submitForm():''">

Component File Add One function Which Return Model Is Valid Or not that call

CheckModelValid(){
 ..... 
 return true // on valid
}

you can also check the validation with below ways:

<form #f="ngForm" novalidate (ngSubmit)="f.form.valid && submitForm()">

if form is valid then only submitForm function call.