如何在打字稿中显示按钮点击验证

2023-12-23

我想显示对空字段的验证,为此我使用了以下方法,但它不起作用。任何人都可以建议我提供帮助吗?谢谢。

我的模板,

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

请检查以下解决方案。

DEMO : https://plnkr.co/edit/mJFftirG3ATDpnJRWmKN?p=preview 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');
      }
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在打字稿中显示按钮点击验证 的相关文章

随机推荐