How to show validation on button click in typescri

2020-05-03 11:53发布

问题:

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

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