Angular [disabled] =“MyBoolean”无法正常工作

时间：2018-05-02 09:09:25

标签： angular property-binding

我有一些输入（Checkboxes），如果我的布尔是真的，我希望它们被禁用。 但它不起作用......有趣的是提交按钮工作正常，这就是相同的方法......

myComponent.html 

      <form [formGroup]="BetreuungsoptionForm" (ngSubmit)="onSubmit()">
        <label *ngIf="!eingetragen" for="art">Art</label>
        <select *ngIf="!eingetragen" formControlName="art" id="art" class="form-control" [(ngModel)]="Art" required >
          <option value="festeAnmeldung">feste Anmeldung</option>
          <option value="flexibleAnmeldung">flexible Anmeldung</option>
        </select>
        <label for="datum">Beginn Datum</label>
        <input formControlName="datum" type="date" id="datum" class="form-control" required>
        <label *ngIf="(Art == 'festeAnmeldung')" for="montag">Montag</label>
        <input *ngIf="(Art == 'festeAnmeldung')" formControlName="montag" [disabled]="montag" type="checkbox" id="montag" class="form-control wochentag">
        <label *ngIf="(Art == 'festeAnmeldung')" for="dienstag">Dienstag</label>
        <input *ngIf="(Art == 'festeAnmeldung')" formControlName="dienstag" [disabled]="dienstag" type="checkbox" id="dienstag" class="form-control wochentag">
        <label *ngIf="(Art == 'festeAnmeldung')" for="mittwoch">Mittwoch</label>
        <input *ngIf="(Art == 'festeAnmeldung')" formControlName="mittwoch" [disabled]="mittwoch" type="checkbox" id="mittwoch" class="form-control wochentag">
        <label *ngIf="(Art == 'festeAnmeldung')" for="donnerstag">Donnerstag</label>
        <input *ngIf="(Art == 'festeAnmeldung')" formControlName="donnerstag" [disabled]="donnerstag" type="checkbox" id="donnerstag" class="form-control wochentag">
        <label *ngIf="(Art == 'festeAnmeldung')" for="freitag">Freitag</label>
        <input *ngIf="(Art == 'festeAnmeldung' )" formControlName="freitag" [disabled]="freitag" type="checkbox" id="freitag" class="form-control wochentag">
    <button type="submit" [disabled]="!BetreuungsoptionForm.valid" class ="btn btn-primary">Speichern</button>
    <button type="button" (click)="OnBetreuungsoptionInfos()" class ="btn btn-success">weitere Informationen</button>
    <button type="button" *ngIf="!gekuendigt" (click)="OnBetreuungsoptionLoeschen()" class ="btn btn-danger">Kündigen</button>
  </form>

myComponent.ts 

    this.BetreuungsoptionForm = new FormGroup
    ({
      art: new FormControl(),
      datum: new FormControl(this.BetreuungsoptionenKindRef[d].Beginn.toString().substring(0,10)),
      montag: new FormControl(this.BetreuungsoptionenKindRef[d].Montag),
      dienstag: new FormControl(this.BetreuungsoptionenKindRef[d].Dienstag),
      mittwoch: new FormControl(this.BetreuungsoptionenKindRef[d].Mittwoch),
      donnerstag: new FormControl(this.BetreuungsoptionenKindRef[d].Donnerstag),
      freitag: new FormControl(this.BetreuungsoptionenKindRef[d].Freitag)
    })
      if(this.BetreuungsoptionenKindRef.Montag)
      {
        this.montag = true;
      }
      if(this.BetreuungsoptionenKindRef.Dienstag)
      {
        this.dienstag = true;
      }
      if(this.BetreuungsoptionenKindRef.Mittwoch)
      {
        this.mittwoch = true;
      }
      if(this.BetreuungsoptionenKindRef.Donnerstag)
      {
        this.donnerstag = true;
      }
      if(this.BetreuungsoptionenKindRef.Freitag)
      {
        this.freitag = true;
      }

6 个答案:

答案 0 :(得分：4)

反应表单不支持原生“禁用”属性。如果您希望它们以您想要的方式工作，请尝试探索：https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

另请参阅Angular反应形式doc，以便在表单控件中执行此类操作。

例如：new FormControl（{value：'tom'，disabled：true}）

答案 1 :(得分：2)

请尝试[attr.disabled]=freitag? true : null"或[attr.readonly]="freitag" 您可以以类似的方式使用[class.btn-lg]="someValue"等属性。

您的文本框因此而起作用：

  

禁用属性是另一个特例。一个按钮   默认情况下，disabled属性为false，因此启用了该按钮。什么时候   你添加了disabled属性，它的存在就会初始化   按钮的disabled属性为true，因此按钮被禁用。

     

添加和删除disabled属性会禁用并启用   按钮。属性的值是无关紧要的，这就是你的原因   无法通过编写<button disabled="false">Still Disabled</button>启用按钮。

来自https://angular.io/guide/template-syntax

答案 2 :(得分：0)

对我来说，以上所有方法均无效，包括以下内容

[disabled]="!enableDelete">

对我有用的是

[disabled]="enableSave == 'false'">

答案 3 :(得分：0)

Try this, trust me it's working..

<input [disabled]="isLoading ? true : null" />

Use null instead of false

答案 4 :(得分：0)

反应形式：