Angular [사용 안 함]="MyBoolean"이 작동하지 않음

Angular [사용 안 함]="MyBoolean"이 작동하지 않음

몇 가지 입력(확인란)이 있는데, 내 불란이 참일 경우 해당 입력을 사용하지 않도록 설정합니다.하지만 효과가 없어요...재미있는 것은 제출 버튼이 잘 작동하고 동일한 방법으로 작동한다는 것입니다.

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>

내 구성요소.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;
          }

ㅠㅠ[attr.disabled]="freitag? true : null"또는[attr.readonly]="freitag"대신.

은 다과같은사수있다니습과 같은 을 사용할 수 .[class.btn-lg]="someValue"유사한 방법으로

텍스트 상자가 작동하는 이유는 다음과 같습니다.

비활성화된 특성은 또 다른 고유한 예입니다.단추의 비활성화된 속성은 기본적으로 false이므로 단추가 활성화됩니다.비활성화된 특성을 추가하면 해당 특성만 있으면 단추의 비활성화된 속성이 true로 초기화되므로 단추가 비활성화됩니다.

비활성화된 특성을 추가하거나 제거하면 버튼이 비활성화되고 활성화됩니다.속성 값은 관련이 없으므로 쓰기를 통해 단추를 활성화할 수 없습니다.<button disabled="false">Still Disabled</button>.

https://angular.io/guide/template-syntax 에서

해봐요, 효과가 있다고 믿어요.

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

사용하다null에 false

반응형 양식은 기본 '사용 안 함' 특성을 지원하지 않습니다.사용자가 원하는 방식으로 작업하기를 원한다면 https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110 에서 확인해 보십시오.

이와 같은 작업을 수행하려면 Angular reactive forms doc을 참조하십시오.

예: 새 FormControl({value: 'tom', 사용 안 함: true})

반응형:

.vmdk 파일:

<textarea class="form-control" rows="4" formControlName="message" [readonly]="disableMessage"></textarea>

.ts 파일:

disableMessage = true;

때때로 'Change Detector Ref'를 사용하여 UI를 새로 고치면 비활성화된 모든 상태가 정상적으로 작동합니다.

구성 요소.ts

ready = false;
constructor(private cdr: ChangeDetectorRef){...}
private setReady(yes: boolean){
    this.ready = yes;
    this.cdr.detectChanges();
}

구성요소.구성요소

<button type="submit" class="btn btn-primary w-100" [disabled]="!ready" i18n>Continue</button>

부트스트랩을 사용하고 클래스를 사용하여 배경색을 적용하는 경우 제거하기만 하면 됩니다.그건 작동할 것이다.

        <button type="submit" class='**bg-primary** text-left form-control w-auto text-white mt-4' [disabled]="manageUsers.invalid">Submit</button>

클래스 필드에서 "bg-primary"를 제거하십시오.그러면 효과가 있을 것입니다.

Angular 앱에서 이 문제에 직면했습니다. 앱의 일부에서는 시간이 부족하고 코드를 깊이 조사할 수 없었기 때문에 이러한 기능이 작동하지 않았지만 몇 가지 요소를 [사용 안 함] 또는 [사용 안 함]으로 비활성화/사용 안 함으로 설정했기 때문에 어리석은 문제처럼 보였습니다.

 <input
      *ngIf="activationEmail != ''; else EmailInput"
      [attr.disabled]="true"
      [value]="activationEmail"
      class="form-control form-control-lg"
    />
    <ng-template #EmailInput>
      <input
        class="form-control form-control-lg"
        type="email"
        formControlName="email"
        autocomplete="off"
        [ngClass]="{
          'is-invalid':
            registrationForm.controls['email'].invalid &&
            registrationForm.controls['email'].touched
        }"
      />
    </ng-template>

반응형이 있는 angular2의 경우 아래 예와 같이 사용합니다.

이.Betreuungs 옵션Form.get('montag').disable();

현재 존재하는 다른 답변 중 제 문제를 해결한 답변은 없습니다.

저의 경우 Angular가 제 폼에 다른 문제가 있다는 증상이었습니다.Chrome Developer Tools를 활성화할 때 Developer Tools 콘솔에서 다음 오류 출력이 표시되었습니다.

core.mjs:8416 오류: mat-form-field는 MatFormFieldControl을 포함해야 합니다.matFormField에서 getMatFormFieldMissingControlError(form-field.mjs:430:12)가 발생합니다._assertFormFieldControl(form-field.mjs:705:19) at MatFormField.ngAfterContentChecked(form-field.mjs:613:14) at callHooks(core.mjs:2460:18) at callHooks(core.mjs:2419:17)refreshView(core.mjs:2370:9)에서 InitAndCheckHooks(core.mjs:10383:21)에서 refreshComponent(core.mjs:11401:13), refreshView(core.mjs:10132:9)에서 CheckChooks(core.mjs:10392:13).

알고 보니 내가 내 컴퓨터에 matInput 속성이 없었습니다.<input>밭예를 들어 변화<input id="category"...로.<input matInput id="category"...

개발자 도구 콘솔을 통해서만 볼 수 있는 오류 메시지를 해결하자,[disabled]지시문이 올바르게 작동하기 시작했습니다.

제 경우, FormControl을 잘못 사용하고 있었습니다. FormControl이 다음과 같은 제어 이름을 가지고 있을 것으로 예상했습니다.[formControl]="CtrlName"제가 제거했을 때, 지금은 정상적으로 작동하지 않습니다.

여기 저를 위해 작동했던 비활성화된 태그가 있습니다.

[disabled]="isDisabledVariable"

참고: Angular Material 버튼을 사용하는 경우 좋은 예는 다음과 같습니다.

<button mat-button [disabled]="condition">Button</button>

라이브러리가 "사용 안 함" 값을 전달하기 위한 입력 속성을 정의하기 때문에 작동합니다.@Input('disabled').

나에게는 아래를 포함하여 위의 것들 중 아무 것도 작동하지 않았습니다.

[disabled]="!enableDelete">

제게 효과가 있었던 것은

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

언급URL : https://stackoverflow.com/questions/50130924/angular-disabled-myboolean-not-working