Question

我有一个发送按钮，其中包含2个Api。因此，如果输入框为空，则发送按钮被禁用。现在我希望有两个条件可以工作， 1.如果我从响应中收到一条错误消息，说

Email-Id you provided is not exist in medicamind account,

然后必须禁用我的发送按钮，直到给出正确的电子邮件为止。

提供电子邮件ID并单击“保存”按钮后，单击一次必须禁用它。如果我再次在输入框上进行编辑，则必须将其启用或必须处于禁用状态。

Answer 1

使用禁用按钮：的attr。如果收到错误，则将其设置为true，然后在收到正确的错误后将其设置为false。对于第二种情况，只需放入（click）=“ generateEmailOtp（enterSms，enterEmail）; booleanVar = false”就足够了。希望对您有所帮助！

Answer 2

您可以举办多个活动，我想您知道。因此，您需要验证两件事：

1-验证电子邮件； 2- OnClick调用您的方法，该方法返回一些信息，但是一旦单击它，则需要再次将其禁用。

您可以将电子邮件验证为用户类型，因为您使用的是模板驱动的表单，因此您可以使用keyup事件使用正则表达式来验证电子邮件。像这样：

<!-- HTML File -->
<input 
   type="text" 
   [(ngModel)]="inputData" 
   (keyup)="keyUpMethod()" >

<button 
   [disabled]="checkBtn"
   (click)="apiCallMethod()">

// .ts File
inputData: string;         // input Data
checkBtn: boolean = false; // Declare it initially as false

// This method fires when the user types
keyUpMethod() {
   if (this.validateEmail(this.inputData)) {
      this.inputData = true; // this enables your button
   } else {
      // if you want to add any exception, it goes here
   }
}

// for validation of email
validateEmail(email) {
   // validate your email here
   return either true or false;
}

// this is will trigger when the user clicks on the button
apiCallMethod() {
   this.inputData = false;  // Disable the button again
   // your button is disabled and you are already in this method, now you can do the 
   // other stuff here
}

如何使按钮禁用，并从响应中返回错误消息，以及使用angular2单击一次后

2 个答案: