Reactive form validation from ts

Question

I am trying to centralized validation message with type. Suppose form is raw or untouched i.e prestine when user submit the form without touching the field i want to show only name is required and email is required messsage only

I have added submitted boolean to figure out but ngIf will always evaluate to false

validationCondition(type: string, controlName: string): boolean {
     return this.myForm.get(`${controlName}`).hasError(`${type}`) &&(this.myForm.get(`${controlName}`).touched || this.myForm.get(`${controlName}`).dirty);
  }

Here we can do something but i m not getting the idea what should i put in order to work with submit too

Link : https://stackblitz.com/edit/angular-tiey4d

I would like to see name is required and email is required when user is submitting the form without touching any field. Also i would like to see validation message while typing in field or leaving from field.

Eliseo Eliseo · Accepted Answer · 2019-10-21T14:30:55

just in onSubmit

 onSubmit() { 
    if (!this.myForm.valid) //if not valid
    {
       this.submitted = true  // because you put the condition "if submitted"
       this.myForm.markAllAsTouched() //mark all the controls as touched
    }else
    {
       console.log(this.myForm.value)
    }
  }

Reactive form validation from ts

2 Answers