复选框为假时禁用单选按钮Angular 2答案

【问题标题】：Disabled radio buttons when checkbox is false Angular 2复选框为假时禁用单选按钮Angular 2
【发布时间】：2017-05-28 22:31:05
【问题描述】：

我有一个 Angular 2 的应用程序。有一个复选框，当它为“假”时，需要禁用单选组内的其他 2 个单选按钮。但我不知道该怎么做。

<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>

【问题讨论】：

标签： angular checkbox radio-button

【解决方案1】：

尝试这样做：

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

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

【讨论】：

不起作用...我通过输入成功：在组件中：disableBanco(e) { if(e.target.checked){ this.form3.get('pessoa').enable (); }else{ this.form3.get('pessoa').disable(); } } 但是，一组单选按钮不起作用

【解决方案2】：

试试这个：

<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... 来检查有效性......但如果你没有，我想我会提到它:)

【讨论】：

费尔南多，这个答案对你有帮助吗？ :)