[angular] 반응 양식-비활성화 된 속성

Program / 글쓴이

의 disabled속성 을 사용하려고 합니다 formControl. 템플릿에 넣으면 작동합니다.

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

그러나 브라우저는 다음과 같이 경고합니다.

반응 양식 지시문과 함께 disabled 속성을 사용하고있는 것 같습니다. 구성 요소 클래스에서이 컨트롤을 설정할 때 disabled를 true로 설정하면 disabled 속성이 실제로 DOM에 설정됩니다. ‘확인 후 변경됨’오류를 방지하려면이 방법을 사용하는 것이 좋습니다.

  Example:
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

그래서 나는 그것을에 넣고 FormControl템플릿에서 삭제했습니다.

constructor(private itemsService: ItemsService) {
    this._items = [];
    this.myForm = new FormGroup({
        id: new FormControl({value: '', disabled: true}, Validators.required),
        title: new FormControl(),
        description: new FormControl()
    });
    this.id = this.myForm.controls['id'];
    this.title = this.myForm.controls['title'];
    this.description = this.myForm.controls['description'];
    this.id.patchValue(this._items.length);
}

그러나 작동하지 않습니다 (을 비활성화하지 않습니다 input). 무엇이 문제입니까?

답변

나는 [attr.disabled]우수한 IMO이기 때문에 프로그래밍 방식 enable () / disable ()보다이 템플릿을 여전히 좋아하기 때문에 사용 하고 있습니다.

변화 

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

…에 

<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>

최신 재료를 사용 md-input하는 경우 mat-input.

답변

다음 방법을 사용하여 양식 컨트롤을 활성화 / 비활성화 할 수 있습니다.

control.disable () 또는 control.enable ()

그것이 효과가 없다면 지시문을 사용할 수 있습니다.

import { NgControl } from '@angular/forms';

@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {
  }

}

그러면 이렇게 사용할 수 있습니다

<input [formControl]="formControl" [disableControl]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>

이 기술은 여기에 설명되어 있습니다.

https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

도움이되기를 바랍니다.

답변

제 경우에는 Angular 8 입니다. 조건에 따라 입력 활성화 / 비활성화를 전환하고 싶었습니다.

[attr.disabled] 나를 위해 작동하지 않았으므로 여기에 내 해결책이 있습니다.

[attr.disabled]HTML에서 제거 하고 구성 요소 기능에서이 검사를 수행했습니다.

if (condition) {
    this.form.controls.myField.disable();
} else {
    this.form.controls.myField.enable();
}

답변

작동하려면 빈 문자열이더라도 기본값이 필요하다는 것을 알았습니다. 그래서 이건:

this.registerForm('someName', {
  firstName: new FormControl({disabled: true}),
});

…이되어야했습니다 :

this.registerForm('someName', {
  firstName: new FormControl({value: '', disabled: true}),
});

내 질문을 참조하십시오 (중복이라고 생각하지 않음) : FormControl 생성자에 양식 상태 개체의 ‘사용 안 함’을 전달하면 작동하지 않습니다.

답변

다음을 사용하여 초기화 (구성 요소) :

public selector = new FormControl({value: '', disabled: true});

그런 다음 (템플릿)을 사용하는 대신 : 

<ngx-select
[multiple]="true"
[disabled]="errorSelector"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

비활성화 된 속성을 제거하십시오.

<ngx-select
[multiple]="true"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

표시 할 항목이 있으면 다음을 실행합니다 (구성 요소에서). this.selector.enable();

답변

반응 형을 사용하는 사람 만 :
네이티브 HTML 요소의 경우 [attr.disabled]가 작동하지만 머티리얼 요소의 경우 요소를 동적으로 비활성화해야합니다.

this.form.get('controlname').disable();

그렇지 않으면 콘솔 경고 메시지에 표시됩니다.

답변

각도 7에서 시도 해봤습니다. 성공적으로 작동했습니다.

this.form.controls['fromField'].reset();
if(condition){
      this.form.controls['fromField'].enable();
}
else{
      this.form.controls['fromField'].disable();
}