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

发布时间：2020-12-17 10:23:59 所属栏目：安全来源：网络整理

导读：我有角度2的应用程序. 有一个复选框,当它为“假”时,需要禁用无线电组内的其他2个单选按钮.但我不知道该怎么做. div class="form-group" [ngClass]="{'has-error':!form3.controls['cadBanco'].valid form3.controls['cadBanco'].touched}" label class="col

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

试试这个：

<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,因为您已在代码中使用它.您实际上并不需要它(如果您没有其他目的),因为您可以使用formcontrols访问该值.

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

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

…并完全跳过ngModel.但也许你知道这个…因为你的代码中使用了form3.controls …来检查有效性……但是如果你没有,我想我会提到它:)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!