Question

我是Angular 2的新手。

我们在HTML中有两个带有单独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");
       }
    });
 }

Answer 1

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

HTML：

var ball = document.getElementById('ball');
    ball.style.position = 'absolute';

    var distance = 0;

requestAnimationFrame(moveBall);

function moveBall() {
        if(distance < 200) {
            distance++;
            ball.style.right = 300 + distance + "px";
            requestAnimationFrame(moveball);
        } 
        else {
            cancelAnimationFrame(moveBall);
        }

    }

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

TS：

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

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

1 个答案: