复选框为false时禁用单选按钮Angular 2

Question

我有一个角度为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>

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，并且希望默认禁用单选按钮，则需要将 设置form3.cadBanco为 false 例如在您的ngOnInit或构造函数中，以防您不使用OnInit.

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

单选按钮禁用也可能如下所示：

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

...并ngModel完全跳过。但也许你知道这一点......因为你在代码中用于form3.controls...检查有效性......但如果你不知道，我想我会提到它:)

Answer 2

尝试这样做：

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

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