web-dev-qa-db-fra.com

Formulaires réactifs - attribut désactivé

J'essaie d'utiliser l'attribut disabled à partir d'un formControl. Quand je le mets dans le template, ça marche:

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

Mais le navigateur m'alerte:

Il semble que vous utilisiez l'attribut disabled avec un formulaire réactif directif. Si vous définissez disabled sur true Lorsque vous configurez ce contrôle dans votre classe de composants, l'attribut désactivé sera en réalité défini dans le DOM pour vous. Nous vous recommandons d'utiliser cette approche pour éviter les erreurs «changé après contrôle».

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

Donc, je le mets dans la FormControl, et 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 (ce n'est pas désactiver la input). Quel est le problème?

angulartypescript
47
FacundoGFlores

J'utilise [attr.disabled] parce que j'aime toujours ce modèle fondé sur enable ()/disable () par programmation 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 utilisez une version plus récente, changez md-input en mat-input.

36
bhantol

Pour résoudre ce problème, vous pouvez essayer comme ceci.

pour désactiver

this.myForm.controls['id'].disable();

pour activer

this.myForm.controls['id'].enable();

Pour plus de références, consultez le numéro publié dans github relatif à cela https://github.com/angular/angular/issues/11271#issuecomment-244507976

16
Ajmal sha

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

control.disable () ou control.enable ()

Si cela ne fonctionne pas pour vous, 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 ) {
  }

}

Ensuite, vous pourriez 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-reaactive-forms-in-angular-549dd7b42110

J'espère que ça aide

8
Kaloyan Stamatov

J'ai trouvé qu'il me fallait 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): Le passage de 'l'état désactivé' dans l'état de formulaire au constructeur FormControl ne fonctionne pas

2
BBaysinger

Initialisation (composant) en utilisant:

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>

Il suffit de supprimer 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();

1
Ignacio Ara

Utilisez [attr.disabled] à la place [disabled], dans mon cas, ça marche

0
Exari Constantin

add disable = "true" au champ html Exemple: disable

<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>
0
Sagar Jadhav

ajoutez l'attribut name à votre entrée md. si cela ne résout pas le problème, postez votre modèle

0
Taha Zgued