Tôi đã thử làm theo ví dụ về các câu trả lời khác từ đây và tôi đã không thành công!

Tôi đã tạo một biểu mẫu phản ứng (tức là động) và tôi muốn tắt một số trường vào bất kỳ thời điểm nào. Mã biểu mẫu của tôi:

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 của tôi:

<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>

Tôi đã giảm mã để tạo điều kiện. Tôi muốn tắt trường loại chọn. Tôi đã cố gắng làm như sau:

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

không làm việc! Còn ai có đề nghị nào không?

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

hoặc là

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

Chú ý

Nếu bạn đang tạo một biểu mẫu bằng cách sử dụng một biến cho điều kiện và cố gắng thay đổi nó sau đó, nó sẽ không hoạt động, tức là biểu mẫu sẽ không thay đổi .

Ví dụ

this.isDisabled = true;

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

và nếu bạn thay đổi biến

this.isDisabled = false;

hình thức sẽ không thay đổi. Bạn nên sử dụng

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

BTW.

Bạn nên sử dụng phương thức patchValue để thay đổi giá trị:

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

Việc sử dụng vô hiệu hóa trong DOM với các biểu mẫu phản ứng là một thực tiễn không tốt. Bạn có thể đặt tùy chọn này trong của bạn FormControl, khi bạn bắt đầu từ

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

Tài sản valuekhông cần thiết

Hoặc bạn có thể kiểm soát biểu mẫu của mình với get('control_name')và đặtdisable

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

Tôi đã giải quyết nó bằng cách gói đối tượng đầu vào của mình với nhãn của nó trong một tập trường: Tập trường phải có thuộc tính bị vô hiệu hóa được liên kết với boolean

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

Các disablingFormControl preventsnó có mặt trong một hình thức trong khi saving. Bạn chỉ có thể đặt nó là thuộc readonlytính.

Và bạn có thể đạt được nó theo cách này:

HTML:

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

TS:

this.disbaleSelect = true;

Tìm thấy cái này ở đây

Nếu để sử dụng disabledcác yếu tố đầu vào biểu mẫu (như được đề xuất trong câu trả lời đúng cách tắt tính năng nhập ) thì xác thực cho chúng cũng sẽ bị vô hiệu hóa, hãy chú ý điều đó!

(Và nếu bạn đang sử dụng trên nút gửi giống như [disabled]="!form.valid"nó sẽ loại trừ trường của bạn khỏi xác thực)

Một cách tiếp cận tổng quát hơn sẽ là.

// 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'
    });
}

Nếu bạn muốn tắt first(kiểm soát biểu mẫu) thì bạn có thể sử dụng câu lệnh dưới đây.

this.form.first.disable();

Điều này đã làm việc cho tôi: this.form.get('first').disable({onlySelf: true});

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

Hoặc formcontrol 'đầu tiên'

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

Bạn có thể đặt tắt hoặc bật trên thiết lập ban đầu.

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

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

Giải pháp tốt nhất là ở đây:

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

Phác thảo giải pháp (trong trường hợp liên kết bị hỏng):

(1) Tạo một chỉ thị

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) Sử dụng nó như vậy

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

(3) Vì các đầu vào bị vô hiệu hóa không hiển thị trong form.value khi gửi, bạn có thể cần sử dụng những thứ sau để thay thế (nếu được yêu cầu):

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

Tôi gặp sự cố tương tự nhưng việc gọi this.form.controls ['name']. Disable () không khắc phục được sự cố vì tôi đang tải lại chế độ xem của mình (sử dụng router.navigate ()).

Trong trường hợp của tôi, tôi phải đặt lại biểu mẫu của mình trước khi tải lại:

this.form = undefined; this.router.navigate ([đường dẫn]);

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

Bạn có thể khai báo một chức năng để bật / tắt tất cả điều khiển biểu mẫu:

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

và sử dụng nó như thế này

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

Để thực hiện một lĩnh vực vô hiệu hóa và kích hoạt tính năng của phản ứng dạng góc 2+

1. Để tắt

• Thêm [attr.disabled] = "true" vào đầu vào.

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

Để kích hoạt

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

Bật toàn bộ biểu mẫu

this.formname.enable();

Chỉ bật trường cụ thể

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

tương tự cho vô hiệu hóa, thay thế enable () bằng vô hiệu hóa ().

Điều này hoạt động tốt. Bình luận cho các truy vấn.