angular - 复选框为假时禁用单选按钮Angular 2

Question

我有一个 Angular 为 2 的应用程序。有一个复选框，当它为“false”时，需要禁用单选组中的其他 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... 来检查有效性......但如果你不知道我想我会提到它:)