Formulaires réactifs - attribut désactivé

J'essaye d'utiliser l' disabledattribut d'un formControl. Quand je le mets dans le modèle, cela fonctionne:

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

Mais le navigateur m'alerte:

Il semble que vous utilisez l'attribut désactivé avec une directive de formulaire réactive. Si vous définissez disabled sur true lorsque vous configurez ce contrôle dans votre classe de composant, l'attribut désactivé sera en fait défini dans le DOM pour vous. Nous vous recommandons d'utiliser cette approche pour éviter les erreurs «modifié après vérification».

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

Je l'ai donc mis dans le FormControlet supprimé du modèle:

constructor(private itemsService: ItemsService) {
    this._items = [];
    this.myForm = new FormGroup({
        id: new FormControl({value: '', disabled: true}, Validators.required),
        title: new FormControl(),
        description: new FormControl()
    });
    this.id = this.myForm.controls['id'];
    this.title = this.myForm.controls['title'];
    this.description = this.myForm.controls['description'];
    this.id.patchValue(this._items.length);
}

Mais cela ne fonctionne pas (cela ne désactive pas le input). Quel est le problème?

J'utilise [attr.disabled]parce que j'aime toujours ce modèle piloté par le programme enable () / disable () car il est supérieur à l'OMI.

Changement

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

à

<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>

Si vous êtes sur un nouveau matériel, passez md-inputà mat-input.

Vous pouvez activer / désactiver un contrôle de formulaire à l'aide des méthodes suivantes:

control.disable () ou control.enable ()

Si cela n'a pas fonctionné, vous pouvez utiliser une directive

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

}

Alors tu pourrais l'utiliser comme ça

<input [formControl]="formControl" [disableControl]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>

Cette technique est décrite ici:

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

J'espère que ça aide

J'ai trouvé que je devais avoir une valeur par défaut, même s'il s'agissait d'une chaîne vide pour que cela fonctionne. Donc ça:

this.registerForm('someName', {
  firstName: new FormControl({disabled: true}),
});

... devait devenir ceci:

this.registerForm('someName', {
  firstName: new FormControl({value: '', disabled: true}),
});

Voir ma question (que je ne crois pas être un doublon): Passer 'disabled' dans l'objet d'état de formulaire au constructeur FormControl ne fonctionne pas

Dans mon cas avec Angular 8 . Je voulais activer / désactiver l'entrée en fonction de la condition.

[attr.disabled] n'a pas fonctionné pour moi, voici ma solution.

J'ai supprimé [attr.disabled]du HTML et dans la fonction du composant effectué cette vérification:

if (condition) {
    this.form.controls.myField.disable();
} else {
    this.form.controls.myField.enable();
}

Initialisation (composant) avec:

public selector = new FormControl({value: '', disabled: true});

Puis au lieu d'utiliser (template):

<ngx-select
[multiple]="true"
[disabled]="errorSelector"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

Supprimez simplement l'attribut désactivé:

<ngx-select
[multiple]="true"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

Et lorsque vous avez des éléments à afficher, lancez (dans le composant): this.selector.enable();

Uniquement pour ceux qui utilisent des formulaires réactifs: pour les éléments HTML natifs, [attr.disabled] fonctionnera mais pour les éléments matériels, nous devons désactiver dynamiquement l'élément.

this.form.get('controlname').disable();

Sinon, il s'affichera dans le message d'avertissement de la console.

J'ai essayé ceux-ci en angulaire 7. Cela a fonctionné avec succès.

this.form.controls['fromField'].reset();
if(condition){
      this.form.controls['fromField'].enable();
}
else{
      this.form.controls['fromField'].disable();
}

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

Pour un formcontrol fait désactiver

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

Ou méthode de réglage initial.

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

Utilisez [attr.disabled] à la place [disabled], dans mon cas cela fonctionne bien

ajouter disable = "true" au champ html Exemple: désactiver

<amexio-text-input formControlName="LastName" disable="true" [(ngModel)]="emplpoyeeRegistration.lastName" [field-label]="'Last Name'" [place-holder]="'Please enter last name'" [allow-blank]="true" [error-msg]="'errorMsg'" [enable-popover]="true" [min-length]="2"
[min-error-msg]="'Minimum 2 char allowed'" [max-error-msg]="'Maximum 20 char allowed'" name="xyz" [max-length]="20">
[icon-feedback]="true">
</amexio-text-input>

La beauté des formulaires réactifs est que vous pouvez détecter très facilement les changements de valeurs de tout élément d'entrée et en même temps, vous pouvez modifier leurs valeurs / leur statut. Voici donc une autre façon de résoudre votre problème en utilisant enable disable.

Voici la solution complète sur stackblitz .

la désactivation des champs de formulaire mat est exemptée si vous utilisez la validation de formulaire, alors assurez-vous que votre champ de formulaire n'a pas de validations comme (validators.required), cela a fonctionné pour moi. par ex:

editUserPhone: nouveau FormControl ({value: '', disabled: true})

cela rend les numéros de téléphone de l'utilisateur non modifiables.

C'était ma solution:

this.myForm = this._formBuilder.group({
    socDate: [[{ value: '', disabled: true }], Validators.required],
    ...
)}

<input fxFlex [matDatepicker]="picker" placeholder="Select Date" formControlName="socDate" [attr.disabled]="true" />

dans Angular-9 si vous souhaitez désactiver / activer sur le bouton cliquez ici est une solution simple si vous utilisez des formulaires réactifs.

définir une fonction dans le fichier component.ts

//enable example you can use the same approach for disable with .disable()

toggleEnable() {
  this.yourFormName.controls.formFieldName.enable();
  console.log("Clicked")
} 

Appelez-le depuis votre component.html

par exemple

<button type="button" data-toggle="form-control" class="bg-primary text-white btn- 
                reset" style="width:100%"(click)="toggleEnable()">

Lorsque vous créez un nouveau contrôle de formulaire, utilisez suivant:

variable: FormControl = new FormControl({value: '', disabled: true});

Si vous voulez changer d'activité, utilisez suivant:

this.variable.enable() 

ou

this.variable.disable()

ajoutez l'attribut de nom à votre entrée md. si cela ne résout pas le problème, veuillez publier votre modèle

Meilleure façon de faire cela.

ngOnInit() {
  this.interPretationForm.controls.InterpretationType.valueChanges.takeWhile(()=> this.alive).subscribe(val =>{
    console.log(val); // You check code. it will be executed every time value change.
  })
}