Question

我正在尝试执行一个验证，如果用户输入的特定值与服务返回的值匹配，我想禁用按钮，以下是我的代码：

在组件中，我调用返回如下用户名的服务，这是（UserNames）的控制台日志：

0:{Name: "John", userId: "23432"}
1:{Name: "Smith", userId: "12323"}
2:{Name: "Alan", userId: "5223"}
3:{Name: "Jenny", userId: "124"}

在模板中，我使用NgFor遍历如下用户名

    <div *ngFor="let id of UserNames let i = index;">  
    <input type="radio" name="radio" [checked]="UserNames.userid" (click)="Submit(UserInput)"> <span>Submit</span>
  </div>

我想要实现的是，如果我输入23432，则应该禁用该按钮，因为该服务已经返回了具有该值的userId，除非应输入新的用户ID，否则应该启用该按钮。

Answer 1

因此，按照您所描述的方式禁用提交按钮的一般情况如下：

<button type="submit" [disabled]="someValidationFn()" ...>

根据您描述的用例，

和someValidationFn()将包含

return UserNames.find(name => { return name.userId === userInput;}));

其中userInput是组件中与用户输入的值绑定的单独属性，大概是通过

这样的开放文本输入来实现的

<input name="userInput" [(ngModel)]="userInput" type="text" placeholder="Enter some user id">

但是，从您粘贴的标记摘要中*，我不清楚您是否具有与单选按钮组分开的“文本”输入。如果单选按钮组打算将提交操作附加到其各个按钮上（不应这样做），则实际上可以确保用户选择将包含存在于您的UserNames数组中的userId：唯一您提供的输入首先基于服务中的数据。

根据您描述的用例，我不确定为什么会有单选按钮组。听起来您只是希望带有验证方法的文本输入字段可确保UserNames中不存在用户输入。

因为我在那里写了一堆抽象代码片段，所以我认为将一些基本的html和js放在一起会有所帮助：

// html
<form submit="someSubmitAction()">
  <input name="userInput" [(ngModel)]="userInput" type="text" placeholder="Enter some user id">
  <button type="submit" [disabled]="someValidationFn()">Submit</button>
</form>

// js
/* don't forget your @Component annotation and class declaration -- I'm assuming these exist and are correct. The class definition encloses all the following logic. */
public userInput: string;
public UserNames: any[];
/* then some service method which grabs the existing UserNames on component's construction or initialization and stores them in UserNames */
public someValidationFn() {
    return UserNames.find(name => { return name.userId === userInput;}));
}
public someSubmitAction() { 
    /* presumably some other service method which POSTs the data */
}

*说到您粘贴的代码段，那里有两个错误： *ngFor="let id of UserNames <-您无法通过引用此处的UserNames数组来获得ID；您将在每次迭代中获得UserNames数组的成员-即，您将获得{Name: "John", userId: "23432"}，然后是{Name: "Smith", userId: "12323"}，依此类推。那不一定是错误，但是我假设b / c您使用id作为变量名，而您只期望userId字段。否则，您必须在每次迭代中使用{{id.userId}}来访问实际的ID。 bob.mazzo提到了[checked]属性的使用的另一个问题

Angular 5根据条件禁用和启用复选框

1 个答案: