如何使用Angular 2在单个ts文件中编写2个表单验证？

发布时间：2020-12-17 18:05:43 所属栏目：安全来源：网络整理

导读：我是Angular 2的新手. 我们在HTML中有2个表单,带有单独的div标签,每当第一个div执行时,第二个div就是假状态.每当成功回调第二个div就会成为真状态.每当它进入第二个div真状态时它将显示this error message. 下面是我的.ts文件代码： constructor(public navC

我是Angular 2的新手.

我们在HTML中有2个表单,带有单独的div标签,每当第一个div执行时,第二个div就是假状态.每当成功回调第二个div就会成为真状态.每当它进入第二个div真状态时它将显示this error message.

下面是我的.ts文件代码：

constructor(public navCtrl: NavController,public navParams: NavParams,public formBuilder:FormBuilder,public logger: Logger,public rest: Rest
            ) {
  this.customer_id=this.navParams.get('customer_id');
  this.mobile=this.navParams.get('mobile');

  this.myForm = formBuilder.group({
    'otpNumber': ['',Validators.required]
    //'password': ['',Validators.required]
   });

  this.myForm1 = formBuilder.group({
    'newpassword': ['',Validators.required],'conformPassword': ['',Validators.required]
  });

  this.getotp();
}

submit(){
  let validateOTPObj = {
    loginId: this.mobile,otp:this.myForm.value.otpNumber
  }

  this.logger.debug("checking the otpNumber"+JSON.stringify(validateOTPObj));

  this.rest.post('/validateOTP',validateOTPObj)
    .subscribe((result)=>{
      this.logger.debug("checking data of success " + JSON.stringify(result));

       if(result.status=='1'){
         //this.navCtrl.push(,{});
         //this.access_token = id;
         this.firstDiv=false;
         this.secondDiv = true;
         this.logger.debug("checking access tocken "+ this.access_token);
         alert("otp success");
       } else {
         this.logger.info("error");
       }
    });
 }

解决方法

只需为不同的形式调用不同的方法：

HTML：

<form (submit)= 'form1()'>
<input type='text'  required >
<input type='submit' value='submit' />

<form (submit)= 'form2()'>
<input type='text'  required >
<input type='submit' value='submit' />

TS：

form1(){
console.log('form 1')
  }

 form2(){
console.log('form 2')
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!