如果条件不匹配，如何禁用角度输入键？答案

【问题标题】：How to disable enter key in angular if condition does not match?如果条件不匹配，如何禁用角度输入键？
【发布时间】：2022-01-24 08:34:34
【问题描述】：

如果输入为空回车键不应该调用函数“generateCityDetailArray()”意味着它应该被禁用，否则它应该调用函数“generateCityDetailArray()”。如何做到这一点？

<div class="form-group">
          <input type = "text" class="col2"  formControlName="pinCode" 
          [(ngModel)]="pinCode"  required (keyup.enter)="generatecityDetailArray()" maxlength="6" />
          <div *ngIf="f.pinCode.invalid && f.pinCode.touched"><strong class="text-danger" *ngIf="f.pinCode.errors?.required">Please enter the value!</strong></div>
</div>

现在，如果我在文本框中单击输入，即使输入为空，它也会调用"generateCityDetailArray()"。需要的是，如果输入为空并且如果单击了输入，那么它应该给出类似“Plz Enter pincode”的消息，当输入为空时不应调用“generateCityDetailArray()”。

【问题讨论】：

标签： html css angular typescript

【解决方案1】：

为什么不直接启动方法generatecityDetailArray() by

if (!this.pinCode) {
  return;
}

【讨论】：

因为我被要求使用验证器，分配任务的人说在“generatecityDetailArray()”中使用 If 语句（任何类型的验证逻辑）将不是标准的反应角度形式方法。跨度>

【解决方案2】：

如果您对输入进行表单控制，则只有在输入没有错误时才能启动方法

(keyup.enter)="pinCode.errors ? '' : generatecityDetailArray()"

如果你想显示信息说你必须输入密码，你可以使用以下语法

 <div *ngIf="pinCode.errors?.['required']">
    Please Enter pincode.
  </div>

在你的类中你必须定义表单控件的getter和setter

get pinCode() { return this.cityDetailForm.get('pinCode'); }

这里是关于验证器的文档 https://angular.io/guide/form-validation

【讨论】：

我已经这样做了 this.cityDetailForm = new FormGroup({ pinCode: new FormControl('',Validators.compose([Validators.required, Validators.minLength(1),Validators.pattern(') ^[0-9]*$')]))
好的，你剩下的问题是什么？如何调用 generatecityDetailArray 和表单验证？
现在，如果我在文本框中单击输入，即使输入为空，它也会调用“generateCityDetailArray()”。需要的是，如果输入为空并且如果单击输入，那么它应该给出类似“Plz Enter pincode”的消息，不应调用“generateCityDetailArray()”。
好的，我编辑我的回复你可以使用(keyup.enter)="pinCode.errors ? '' : generatecityDetailArray(ProjectName)"来启动功能，只有当密码没有错误时
它给出错误“类型'string'上不存在属性'errors'。另外我应该在（ProjectName）中写什么。我应该写表单名称吗？

【解决方案3】：

建议使用 generatecityDetailArray() 方法启动并检查您的值是否为 pinCode 是一个不错的选择。
如果您想在模板中执行检查，您还可以执行以下操作：

(keyup.enter)="cityDetailForm.get('pinCode').invalid ? $event.preventDefault() : generatecityDetailArray()"

如果您只有一个用于 pinCode formControl 的验证器设置。如果您有多个，请检查cityDetailForm.get('pinCode').errors?['required']。
这也是假设cityDetailForm 是您的formGroup。我以前认为这只是f，因为ngIf 检查您的div。
在这种情况下，最好在组件中有一个 getter，所以它会是这样的：

  get isCityDetailInValid(): boolean {
    return this.cityDetailForm.get('pinCode').errors?['required'];
    // or this.cityDetailForm.get('pinCode').invalid;
  }

那么你的模板就是：

(keyup.enter)="isCityDetailInValid ? $event.preventDefault() : generatecityDetailArray()"

【讨论】：

感谢@justchecking 我只想签入模板，但使用此代码 "(keyup.enter)="pinCode ?? generatecityDetailArray()" , "generatecityDetailArray()" 即使输入值也不会被调用
@Rajeev 抱歉，我没有注意到您使用 pinCode 作为 formControl。 [(ngModel)] 让我失望了。如果您使用的是响应式表单，则不需要它。就您的教授而言，最常见的做法是检查您的表单输入在处理您收集的数据的方法中是否有效。如果您将验证器设置为将输入字段设置为required，您仍然可以在模板中进行检查。类似于(keyup.enter)=f.pinCode.invalid ? generatecityDetailArray() : $event.preventDefault()。
验证器设置为需要输入字段。但是添加代码什么也没做，它仍然是一样的。此代码“(keyup.enter)=f.pinCode.invalid ? generatecityDetailArray() : $event.preventDefault()”不起作用。
@Rajeev 实际上应该恢复条件，如果没有错误，你想调用 generatecityDetailArray()，所以应该是f.pinCode.invalid ? $event.preventDefault() : generatecityDetailArray()。这是一些伪代码，请多加努力。完整的解决方案应该是(keyup.enter)=cityDetailForm.get('pinCode').invalid ? $event.preventDefault() : generatecityDetailArray() 这是如果您只有一个用于 pinCode formControl 的验证器设置。如果您有多个请检查cityDetailForm.get('pinCode').errors?['required']。