CODEWITHSUNDEEP
angular
Indraraj26
Indraraj26

Reputation: 1966

Reactive form validation from ts

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.

Upvotes: 0

Views: 85

Answers (2)

Eliseo
Eliseo

Reputation: 57919

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

Upvotes: 1

Vitor Piovezam
Vitor Piovezam

Reputation: 443

You can check if form has errors with this boolean in root obj.

this.myForm.invalid

Upvotes: 0

Related Questions