Question

我可以在使用angular2的复选框中获得实施单选按钮功能的指导吗？我尝试使用相同的名称和ngModel，但没有工作

这是我的component.html

<form [formGroup]="conformityForm">     
   <table class="table table-bordered">
      <thead>
         <tr>
           <th>Evaluation</th>
           <th>Yes</th>
           <th>No</th>
         </tr>
      </thead>
      <tbody>
        <tr>
          <td>Do the staff have adequate qualifications for the tasks?</td>
          <td>
             <input type="checkbox" formControlName="IsAdequatequalificationsYes">
          </td>
          <td>
             <input type="checkbox" formControlName="IsAdequatequalificationsNo">
          </td>
        </tr>
      </tbody>
    </table>
 </form>

component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

  export class Test implements OnInit {
   conformityForm: FormGroup;
    constructor(private formBuilder: FormBuilder)      
      this.conformityForm = this.formBuilder.group({
        'IsInConvenienceYes': [''],
        'IsInConvenienceNo': ['']
     });
  }
}

Answer 1

修改

我并不是真的认为这是真的，因此当您选中其他复选框时，您不想禁用该字段。但这是单选按钮行为的解决方案。我们使用相同的变量yes和no，如下所示。在这里，我们只使用false和true对值进行修补，如果选中另一个，则会取消选中另一个值。因此，将模板更改为：

<input type="checkbox" (change)="yes.patchValue(true) ? yes.patchValue(true) : no.patchValue(false)" formControlName="IsAdequatequalificationsYes"> <input type="checkbox" (change)="no.patchValue(true) ? no.patchValue(false) : yes.patchValue(false)" formControlName="IsAdequatequalificationsNo">

<强> PLUNKER

原始答案：

作为第一个评论，我可以说通常的[disabled]不适用于被动表格，所以我们需要以另一种方式进行。

我喜欢缩短表单控件以提高可读性，这里我使用了变量yes和no，您可能想要做一些更合适的名称吗？无论如何，它们在TS中定义如下：

this.yes = this.conformityForm.get('IsAdequatequalificationsYes'); this.no = this.conformityForm.get('IsAdequatequalificationsNo');

然后我们在表单中添加一个更改事件，我们检查当前复选框是否被选中，如果是，我们禁用另一个，另一种方法是使用三元运算符。对yes：
执行以下操作
<input type="checkbox" (change)="yes.value ? no.disable() : no.enable()" formControlName="IsAdequatequalificationsYes">

而对于no，我们只是将其改为相反的。

应该这样做！：）

<强> PLUNKER

Answer 2

此外，您可以使用此选项：

<input type="checkbox" (change)="yes.patchValue(true); no.patchValue(false);" formControlName="IsAdequatequalificationsYes">
<input type="checkbox" (change)="yes.patchValue(false); no.patchValue(true);" formControlName="IsAdequatequalificationsNo">

Angular2：具有单选按钮功能的复选框

2 个答案: