Saya sudah mencoba mengikuti contoh jawaban lain dari sini dan saya tidak berhasil!

Saya membuat formulir reaktif (yaitu, dinamis) dan saya ingin menonaktifkan beberapa bidang pada waktu tertentu. Kode formulir saya:

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

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

Saya mengurangi kode untuk memfasilitasi. Saya ingin menonaktifkan bidang tipe pilih. Saya mencoba melakukan hal berikut:

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

tidak bekerja! Apakah ada yang punya saran?

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

atau

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

Perhatian

Jika Anda membuat formulir menggunakan variabel untuk kondisi dan mencoba mengubahnya nanti, formulir tidak akan berfungsi, yaitu formulir tidak akan berubah .

Sebagai contoh

this.isDisabled = true;

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

dan jika Anda mengubah variabel

this.isDisabled = false;

bentuknya tidak akan berubah. Kamu harus menggunakan

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

BTW.

Anda harus menggunakan metode patchValue untuk mengubah nilai:

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

Merupakan praktik yang buruk untuk menggunakan disable di DOM dengan bentuk reaktif. Anda dapat menyetel opsi ini di FormControl, saat Anda memulai dari

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

Properti valuetidak perlu

Atau Anda bisa mendapatkan kontrol formulir Anda dengan get('control_name')dan mengaturdisable

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

Saya menyelesaikannya dengan membungkus objek input saya dengan labelnya dalam satu set bidang: Fieldset harus memiliki properti yang dinonaktifkan terikat ke boolean

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

The disablingFormControl preventsitu untuk hadir dalam bentuk sementara saving. Anda bisa mengaturnya sebagai readonlyproperti.

Dan Anda bisa mencapainya dengan cara ini:

HTML:

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

TS:

this.disbaleSelect = true;

Temukan ini di sini

Jika akan menggunakan disabledelemen input formulir (seperti yang disarankan dalam jawaban yang benar bagaimana menonaktifkan input ) validasi untuk mereka juga akan dinonaktifkan, perhatikan itu!

(Dan jika Anda menggunakan tombol kirim seperti [disabled]="!form.valid"itu akan mengecualikan bidang Anda dari validasi)

Pendekatan yang lebih umum adalah.

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

Jika Anda ingin menonaktifkan first(formcontrol) maka Anda dapat menggunakan pernyataan di bawah ini.

this.form.first.disable();

Ini berhasil untuk saya: this.form.get('first').disable({onlySelf: true});

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

Atau formcontrol 'first'

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

Anda dapat mengatur menonaktifkan atau mengaktifkan pada set awal.

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

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

Solusi terbaik ada di sini:

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

Garis besar solusi (dalam kasus tautan rusak):

(1) Buat direktif

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) Gunakan seperti itu

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

(3) Karena input yang dinonaktifkan tidak muncul di form.value on submit Anda mungkin perlu menggunakan yang berikut ini (jika diperlukan):

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

Saya memiliki masalah yang sama, tetapi memanggil this.form.controls ['name']. Disable () tidak memperbaikinya karena saya sedang memuat ulang view saya (menggunakan router.navigate ()).

Dalam kasus saya, saya harus mengatur ulang formulir saya sebelum memuat ulang:

this.form = undefined; this.router.navigate ([path]);

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

Anda dapat mendeklarasikan fungsi untuk mengaktifkan / menonaktifkan semua kontrol formulir:

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

dan gunakan seperti ini

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

Untuk membuat lapangan menonaktifkan dan memungkinkan dari reaktif bentuk sudut 2+

1. Untuk menonaktifkan

• Tambahkan [attr.disabled] = "true" ke masukan.

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

Untuk mengaktifkan

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

Aktifkan seluruh formulir

this.formname.enable();

Aktifkan bidang tertentu saja

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

sama untuk menonaktifkan, ganti enable () dengan nonaktifkan ().

Ini Bekerja dengan baik. Komentar untuk pertanyaan.