나는 이미 여기에서 다른 답변의 예를 따르려고 시도했지만 성공하지 못했습니다!

반응 형 (즉, 동적)을 만들었고 언제든지 일부 필드를 비활성화하고 싶습니다. 내 양식 코드 :

this.form = this._fb.group({
  name: ['', Validators.required],
  options: this._fb.array([])
});

const control = <FormArray>this.form.controls['options'];
control.push(this._fb.group({
  value: ['']
}));

내 HTML :

<div class='row' formArrayName="options">
  <div *ngFor="let opt of form.controls.options.controls; let i=index">
    <div [formGroupName]="i">
      <select formArrayName="value">
        <option></option>
        <option>{{ opt.controls.value }}</option>
      </select>
    </div>
  </div>
</div>

용이하게하기 위해 코드를 줄였습니다. 유형 선택 필드를 비활성화하고 싶습니다. 다음을 시도했습니다.

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

작동하지 않는! 누구에게 제안이 있습니까?

name: [{value: '', disabled: true}, Validators.required],
name: [{value: '', disabled: this.isDisabled}, Validators.required],

또는

this.form.controls['name'].disable();

주의

조건에 대한 변수를 사용하여 양식을 만들고 나중에 변경하려고하면 작동 하지 않습니다 . 즉 , 양식이 변경되지 않습니다 .

예를 들면

this.isDisabled = true;

this.cardForm = this.fb.group({
    'number': [{value: null, disabled: this.isDisabled},
});

그리고 변수를 변경하면

this.isDisabled = false;

양식은 변경되지 않습니다. 당신은 사용해야합니다

this.cardForm.get ( 'number'). disable ();

BTW.

값을 변경하려면 patchValue 메서드를 사용해야합니다.

this.cardForm.patchValue({
    'number': '1703'
});

반응 형 양식이있는 DOM에서 disable을 사용하는 것은 나쁜 습관입니다. 당신은 당신이 옵션을 설정할 수 있습니다 FormControl당신이에서 init을 때,

username: new FormControl(
  {
    value: this.modelUser.Email,
    disabled: true
  },
  [
    Validators.required,
    Validators.minLength(3),
    Validators.maxLength(99)
  ]
);

재산 value이 필요하지 않습니다

또는 다음을 사용하여 양식을 제어 get('control_name')하고 설정할 수 있습니다.disable

this.userForm.get('username').disable();

필드 세트의 레이블로 입력 객체를 래핑하여 해결했습니다. 필드 세트에는 부울에 바인딩 된 disabled 속성이 있어야합니다.

 <fieldset [disabled]="isAnonymous">
    <label class="control-label" for="firstName">FirstName</label>
    <input class="form-control" id="firstName" type="text" formControlName="firstName" />
 </fieldset>

disablingFormControl는 prevents그 동안 형태로 존재하는 것으로 saving. readonly속성을 설정하기 만하면됩니다 .

그리고 다음과 같이 할 수 있습니다.

HTML :

<select formArrayName="value" [readonly] = "disableSelect">

TS :

this.disbaleSelect = true;

여기 에서 찾았 습니다

사용하는 경우 disabled(정답에 제안처럼 폼 입력 요소 방법을 비활성화 입력에 그들도 비활성화되어 주목을 취할 것입니다에 대한 검증)!

(그리고 제출 버튼을 사용하는 경우 [disabled]="!form.valid"유효성 검사에서 필드가 제외됩니다)

보다 일반적인 접근 방식이 있습니다.

// Variable/Flag declare
public formDisabled = false;

// Form init
this.form = new FormGroup({
  name: new FormControl({value: '', disabled: this.formDisabled}, 
    Validators.required),
 });

// Enable/disable form control
public toggleFormState() {
    this.formDisabled = !this.formDisabled;
    const state = this.formDisabled ? 'disable' : 'enable';

    Object.keys(this.form.controls).forEach((controlName) => {
        this.form.controls[controlName][state](); // disables/enables each form control based on 'this.formDisabled'
    });
}

first(formcontrol) 을 비활성화 하려면 아래 문을 사용할 수 있습니다.

this.form.first.disable();

이것은 나를 위해 일했습니다. this.form.get('first').disable({onlySelf: true});

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

또는 formcontrol 'first'

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

초기 설정에서 비활성화 또는 활성화를 설정할 수 있습니다.

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

lastName: new FormControl({value: '', disabled: true}, Validators.compose([Validators.required])),

최고의 솔루션은 다음과 같습니다.

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

솔루션 개요 (링크가 끊어진 경우) :

(1) 지시문 작성

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 ) {}
}

(2) 그렇게 사용

<input [formControl]="formControl" [disableControl]="condition">

(3) 비활성화 된 입력은 제출시 form.value에 표시되지 않으므로 대신 다음을 사용해야 할 수 있습니다 (필요한 경우).

onSubmit(form) {
  const formValue = form.getRawValue() // gets form.value including disabled controls
  console.log(formValue)
}

나는 같은 문제가 있었지만 this.form.controls [ 'name']. disable () 호출은 내 뷰를 다시로드했기 때문에 수정하지 못했습니다 (router.navigate () 사용).

제 경우에는 다시로드하기 전에 양식을 재설정해야했습니다.

this.form = 정의되지 않음; this.router.navigate ([경로]);

setTimeout(() => { emailGroup.disable(); });

모든 양식 컨트롤을 활성화 / 비활성화하는 함수를 선언 할 수 있습니다.

  toggleDisableFormControl(value: Boolean, exclude = []) {
    const state = value ? 'disable' : 'enable';
    Object.keys(this.profileForm.controls).forEach((controlName) => {
      if (!exclude.includes(controlName))
        this.profileForm.controls[controlName][state]();
    });
  }

이렇게 사용하세요

this.toggleDisableFormControl(true, ['email']);
// disbale all field but email

필드 만들려면 비활성화 및 활성화 의 반응 형태의 각도 2+

1. 비활성화하려면

• 추가 [attr.disabled] = "true"를 입력합니다.

<input class="form-control" name="Firstname" formControlName="firstname" [attr.disabled]="true">

사용하려면

export class InformationSectionComponent {
formname = this.formbuilder.group({
firstname: ['']
});
}

전체 양식 활성화

this.formname.enable();

특정 필드 만 활성화

this.formname.controls.firstname.enable();

비활성화와 동일하게 enable ()을 disable ()으로 바꿉니다.

이것은 잘 작동합니다. 쿼리에 대한 설명.