CODEWITHSUNDEEP
angulartypescript
MMR
MMR

Reputation: 3029

How to show validation on button click in typescript

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

Upvotes: 0

Views: 5387

Answers (2)

Issam Gzt
Issam Gzt

Reputation: 1

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

}

Upvotes: 0

micronyks
micronyks

Reputation: 55443

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

Upvotes: 1

Related Questions