How to show validation on button click in typescript

Question

I want to show up validation for the fields which are empty and for that i used the following method but its not working.Can anyone suggest me help.Thanks.

My template,

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="nobottommargin adminloginform" novalidate>
<label class="col-sm-4 text-right norightpadding">First Name</label>
     <div class="input-group" [ngClass]="{errmsg: (!form.controls['password'].valid ||
   (!form.controls['password'].pristine && submitted ))}">
    <input type="text" [formControl]="form.controls['lastname']" >
  </div>
<div class="col-sm-8">
          <button type="submit" >Register now</button>
        </div>

My ts,

    export class SignUp {
    submitted: boolean = false;
constructor(public fbld: FormBuilder, http: Http, public config: Config, public router: Router) {
    this.http = http;
    this.form = fbld.group({
        firstname: ['', Validators.required],
    });
    this.header = this.config.header1;
}
    onSubmit(form: ISignup): any {
        this.submitted = true;
     }
    }

Validations are not applied when i click submit button with an empty form — MMR
– MMR, Commented Oct 20, 2016 at 6:06

micronyks · Accepted Answer · 2016-10-20 06:47:03Z

1

Please check below solution.

DEMO : https://plnkr.co/edit/mJFftirG3ATDpnJRWmKN?p=preview

export class AppComponent {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder){
      this.submitted=false;
       this.form = formBuilder.group({
        lastname: ['', Validators.required],
      });
   }

   onSubmit(form)
   {
      this.submitted=true;

      console.log(form);
      if(form.valid)    //<<<### submit form is it is valid only
      {
        console.log('form submitted');
      }
    }
}

answered Oct 20, 2016 at 6:47

micronyks

55.7k17 gold badges122 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Philip Enc Over a year ago

This is working because you clicked the submit button. We are asking how show validation errors in typescript mode, executing a method, not a click form...

Issam Gzt · Accepted Answer · 2022-05-17 11:00:03Z

0

AskConge(){

this.congeService.askConge().subscribe((response) =>{  
  this.router.navigate(['/dashboard/conge/mes-demandes']).then(() => {
    window.location.reload()
    console.log('Post Done')
  })
}, (error) => {
  console.log(error);
})

}

answered May 17, 2022 at 11:00

Issam Gzt

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to show validation on button click in typescript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related