반응 양식-비활성화 된 속성

의 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();
}

this.form.disable()
this.form.enable()

하나의 formcontrol에 대해 비활성화

this.form.get('first').disable()
this.form.get('first').enable()

또는 초기 설정 방법.

first: new FormControl({disabled: true}, Validators.required)

[disabled] 대신 [attr.disabled]를 사용하십시오. 제 경우에는 정상적으로 작동합니다.

html 필드에 disable = "true"추가 예 : disable

<amexio-text-input formControlName="LastName" disable="true" [(ngModel)]="emplpoyeeRegistration.lastName" [field-label]="'Last Name'" [place-holder]="'Please enter last name'" [allow-blank]="true" [error-msg]="'errorMsg'" [enable-popover]="true" [min-length]="2"
[min-error-msg]="'Minimum 2 char allowed'" [max-error-msg]="'Maximum 20 char allowed'" name="xyz" [max-length]="20">
[icon-feedback]="true">
</amexio-text-input>

반응 형의 장점은 입력 요소의 값 변경 이벤트를 매우 쉽게 포착 할 수 있으며 동시에 값 / 상태를 변경할 수 있다는 것입니다. 을 사용하여 문제를 해결하는 또 다른 방법이 있습니다 enable disable.

다음은 stackblitz 의 완전한 솔루션입니다 .

양식 유효성 검사를 사용하는 경우 매트 양식 필드 비활성화는 면제되므로 양식 필드에 (validators.required)와 같은 유효성 검사가 없는지 확인하십시오. 예 :

editUserPhone : new FormControl ({value : '', disabled : true})

이렇게하면 사용자의 전화 번호를 편집 할 수 없습니다.

이것이 내 해결책이었습니다.

this.myForm = this._formBuilder.group({
    socDate: [[{ value: '', disabled: true }], Validators.required],
    ...
)}

<input fxFlex [matDatepicker]="picker" placeholder="Select Date" formControlName="socDate" [attr.disabled]="true" />

에 각도-9는 사용하지 않을 경우 / 여기 버튼을 클릭 수는 반응 형태를 사용하는 경우 간단한 솔루션입니다.

component.ts 파일에 함수 정의

//enable example you can use the same approach for disable with .disable()

toggleEnable() {
  this.yourFormName.controls.formFieldName.enable();
  console.log("Clicked")
} 

component.html에서 호출하십시오.

예 :

<button type="button" data-toggle="form-control" class="bg-primary text-white btn- 
                reset" style="width:100%"(click)="toggleEnable()">

새 Form 컨트롤을 만들 때 다음을 사용하십시오.

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

변경 활동을 원하면 다음을 사용하십시오.

this.variable.enable() 

또는

this.variable.disable()

md 입력에 이름 속성을 추가하십시오. 문제가 해결되지 않으면 템플릿을 게시하세요.

이를위한 궁극적 인 방법입니다.

ngOnInit() {
  this.interPretationForm.controls.InterpretationType.valueChanges.takeWhile(()=> this.alive).subscribe(val =>{
    console.log(val); // You check code. it will be executed every time value change.
  })
}