Zaten buradan başka cevapların örneğini izlemeye çalıştım ve başarılı olamadım!

Reaktif bir form (yani dinamik) oluşturdum ve bazı alanları herhangi bir zamanda devre dışı bırakmak istiyorum. Form kodum:

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: ['']
}));

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

Kolaylaştırmak için kodu düşürdüm. Select type alanını devre dışı bırakmak istiyorum. Aşağıdakileri yapmaya çalıştım:

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

çalışmıyor! Bir önerisi olan var mı?

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

veya

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

Çok dikkat

Koşul için değişken kullanarak bir form oluşturuyorsanız ve daha sonra değiştirmeye çalışıyorsanız, çalışmaz, yani form değişmez .

Örneğin

this.isDisabled = true;

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

ve değişkeni değiştirirseniz

this.isDisabled = false;

form değişmeyecek. Kullanmalısın

this.cardForm.get ('sayı']. disable ();

BTW.

Değeri değiştirmek için patchValue yöntemini kullanmalısınız:

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

Devre dışı bırakmayı reaktif formlar içeren bir DOM'da kullanmak kötü bir uygulamadır. Bu seçeneği FormControlşuradan başlattığınızda

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

Mülkiyet valuegerekli değil

Veya form kontrolünüzü alabilir get('control_name')ve ayarlayabilirsinizdisable

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

Girdi nesnemi etiketiyle birlikte bir alan kümesine sararak çözdüm: Alan kümesinde devre dışı bırakılmış özelliğin boole değerine bağlanması gerekir

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

disablingFormControl preventsbu ise bir formda mevcut olduğu saving. Sadece readonlyözelliği ayarlayabilirsiniz .

Ve bunu şu şekilde başarabilirsiniz:

HTML:

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

TS:

this.disbaleSelect = true;

Bunu burada buldum

Kullanımı ise disabled(doğru cevap önerilen gibi form giriş elemanları nasıl devre dışı girişine onları da özürlü olması için dikkat alacak için doğrulama)!

(Ve eğer gönder düğmesini kullanıyorsanız, [disabled]="!form.valid"alanınızı doğrulamanın dışında tutacaktır)

Daha genel bir yaklaşım olacaktır.

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

firstDevre dışı bırakmak istiyorsanız (formcontrol), aşağıdaki ifadeyi kullanabilirsiniz.

this.form.first.disable();

Bu benim için çalıştı: this.form.get('first').disable({onlySelf: true});

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

Veya formcontrol 'ilk'

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

İlk sette devre dışı bırakabilir veya etkinleştirebilirsiniz.

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

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

En iyi çözüm burada:

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

Çözüm özeti (kopuk bağlantı durumunda):

(1) Bir yönerge oluşturun

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) Öyle kullanın

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

(3) Devre dışı girişler form.value'da gönderilmediği için bunun yerine aşağıdakileri kullanmanız gerekebilir (gerekirse):

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

Aynı sorunu yaşadım, ancak this.form.controls ['name'] 'i çağırmak sorunu çözmedi, çünkü görünümümü yeniden yüklüyordum (router.navigate () kullanarak).

Benim durumumda, yeniden yüklemeden önce formumu sıfırlamam gerekiyordu:

this.form = tanımsız; this.router.navigate ([yol]);

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

Tüm form denetimini etkinleştirmek / devre dışı bırakmak için bir işlev bildirebilirsiniz:

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

ve böyle kullan

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

Bir alanı devre dışı bırakmak ve reaktif formu açısal etkinleştirmek için 2+

1. Devre dışı bırakmak için

• Girişe [attr.disabled] = "true" ekleyin .

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

Etkinleştirmek

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

Tüm formu etkinleştir

this.formname.enable();

Belirli bir alanı tek başına etkinleştir

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

devre dışı bırakmak için de aynı, enable () yerine disable () yazın.

Bu iyi çalışıyor. Sorgular için yorum yapın.