Angular 2中当复选框未被选中时禁用单选按钮

Question

我有一个使用Angular 2开发的应用程序。 有一个复选框，当它为“false”时，单选组内的其他两个单选按钮需要被禁用。但是我不知道该如何实现。

<div class="form-group" [ngClass]="{'has-error':!form3.controls['cadBanco'].valid && form3.controls['cadBanco'].touched}">
      <label class="col-sm-2 control-label">Cadastrar dados bancários?</label>
      <div class="input-group">
      <input formControlName="cadBanco" type="checkbox" value="1" [(ngModel)]="form3.cadBanco" (change)="disableBanco($event)">
      </div>
      </div><br />

    <div class="form-group" [ngClass]="{'has-error':!form3.controls['pessoa'].valid && form3.controls['pessoa'].touched}">
     <label class="col-sm-2 control-label">Tipo de pessoa:</label>
     <div class="input-group">
      <div class="btn-group" data-toggle="buttons" [class.invalid]="form3.controls['pessoa'].touched && !form3.controls['pessoa'].valid">
            <label class="btn btn-default active">
                <input type="radio"  [(ngModel)]="form3.pessoa"  formControlName="pessoa" value="1" [class.invalid]="form3.controls['pessoa'].touched && !form3.controls['pessoa'].valid"/> Pessoa jurídica
            </label> 
            <label class="btn btn-default">
                <input type="radio"  [(ngModel)]="form3.pessoa"  formControlName="pessoa" value="2" [class.invalid]="form3.controls['pessoa'].touched && !form3.controls['pessoa'].valid"/> pessoa física
            </label>
        </div>

      </div>
      <div *ngIf="form3.controls['pessoa'].hasError('required') && form3.controls['pessoa'].touched" class="alert alert-danger">Preencha o campo tipo de pessoa.</div>
     </div>

- Fernando Herique Rubim Pioli

Answer 1

试试这个：

<input formControlName="cadBanco" type="checkbox" [(ngModel)]="form3.cadBanco">

并且

<input formControlName="pessoa" type="radio" [(ngModel)]="form3.pessoa" [attr.disabled]="form3.cadBanco === false || null">

我在这里添加了null，因为默认情况下，在选择复选框之前，其默认值为null。

如果您正在使用ngModel，并且希望默认情况下禁用单选按钮，则需要在ngOnInit或构造函数中将form3.cadBanco设置为false（如果您没有使用OnInit）。

我在这里添加了ngModel，因为您在代码中使用了它。如果您没有其他目的，实际上不需要它，因为您可以使用表单控件访问该值。

单选按钮的禁用也可以像这样显示:

[attr.disabled]="form3.controls.cadBanco.value == false || null"

...并且完全跳过ngModel。但也许你已经知道了这一点......因为在你的代码中使用了form3.controls...来检查有效性......但以防万一，我还是想提一下:)

- AT82

---

Fernando，这个答案对你有帮助吗？ :) - AT82

Answer 2

尝试以这种方式实现：

 <input type="checkbox" [(ngModel)]="form3.cadBanco" #someCheckbox />

 <input type="radio"  [(ngModel)]="form3.pessoa" [attr.disabled]="!someCheckbox.value" />

- Jaroslaw K.

---

无法正常工作...我已经成功输入了以下内容： 在组件中： disableBanco(e) { if(e.target.checked){ this.form3.get('pessoa').enable(); }else{ this.form3.get('pessoa').disable(); } }但是，对于一组单选按钮，它不起作用。 - Fernando Herique Rubim Pioli