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

Posted 2023-03-13

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

【英文标题】：How to write 2 forms validations in single ts file using Angular 2?

【发布时间】：2017-04-24 15:42:45

【问题描述】：

我是 Angular 2 的新手。

我们在 html 中有 2 个带有单独 div 标签的表单，每当第一个 div 执行时，第二个 div 是 false 状态。每当成功回调时，第二个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端吗？

如果您共享您的 html 会更好，但根据错误消息，您可能只是忘记在 html 中将 myForm/myForm1 声明为 formGroup [formGroup]="myForm" [formGroup]="myForm1"

【参考方案1】：

只需为不同的表单调用不同的方法：

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