Désactiver les champs de saisie dans les formulaires réactifs

Question

J'ai déjà essayé de suivre l'exemple d'autres réponses d'ici et je n'ai pas réussi !

J'ai créé un formulaire réactif (c'est-à-dire dynamique) et je veux désactiver certains champs à tout moment. Le code de mon formulaire :

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

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

J'ai réduit le code pour le faciliter. Je veux désactiver le champ de type select. J'ai essayé de faire ce qui suit :

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

ne fonctionne pas ! Quelqu'un a-t-il une suggestion ?

Answer 1

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

ou

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

Answer 2

Soyez attentif

Si vous créez un formulaire en utilisant une variable pour la condition et que vous essayez de la modifier ultérieurement, cela ne fonctionnera pas. le formulaire ne changera pas .

Par exemple

this.isDisabled = true;

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

et si vous changez la variable

this.isDisabled = false;

le formulaire ne sera pas modifié. Vous devez utiliser

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

BTW.

Vous devez utiliser la méthode patchValue pour modifier la valeur :

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

Answer 3

C'est une mauvaise pratique d'utiliser disable dans un DOM avec des formulaires réactifs. Vous pouvez définir cette option dans votre FormControl lorsque vous lancez le programme de

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

Propriété value n'est pas nécessaire

Ou vous pouvez obtenir votre contrôle de formulaire avec get('control_name') et mettre disable

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

Answer 4

Une approche plus générale serait.

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

Answer 5

Cela a marché pour moi : this.form.get('first').disable({onlySelf: true});