Checkbox 角度5根据条件禁用和启用复选框

我正在尝试实现一个验证，在该验证中，如果用户输入的特定值与服务返回的值匹配，我希望禁用该按钮，下面是我的代码：

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

在模板中，我使用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应该被启用。

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

根据您描述的用例，

someValidationFn（）

将包含如下内容

返回用户名.find（name=>{returnname.userId===userInput；}））

其中，

userInput

是组件中绑定到某个用户输入值的单独属性，可能是通过类似

但是，从您粘贴的标记片段*，我不清楚您是否将“文本”输入与单选按钮组分开。如果单选按钮组要将提交操作附加到其各个按钮（不应该），那么您实际上可以保证用户选择将包含一个存在于

用户名

数组中的用户名：您提供的唯一输入是基于最初来自您服务的数据

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

用户名中不存在用户输入

因为我在那里写了很多抽象片段，所以我认为展示一些基本的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 */
}

//html
提交
//js
/*不要忘记@Component注释和类声明——我假设它们存在并且是正确的。类定义包含以下所有逻辑*/
公共用户输入：字符串；
公共用户名：任意[]；
/*然后是一种服务方法，它在组件的构造或初始化时获取现有的用户名，并将它们存储在用户名中*/
公共验证fn（）{
return UserNames.find（name=>{return name.userId===userInput；}））；
}
public someSubmitAction（）{
/*可能是发布数据的其他服务方法*/
}

*说到您粘贴的代码段，这里有几个错误：
*ngFor=“let id of UserNames
在您的示例中是否有我们没有看到的其他按钮？或者您的意思是应该根据该条件选中或取消选中“单选按钮”。可能类似于
[checked]=”UserNames.userid！==myUserID“
，其中，
myUserID
是用户输入的。您解释问题和建议解决方案的方法非常出色，我稍微修改了您的解决方案以使其发挥作用：提交并将您的答案标记为解决方案感谢Alexi，很高兴能提供帮助。如果你有时间并且不介意接受它作为解决方案，那就太棒了！
// 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 */
}