Impossible de désactiver l'élément matInput avec [formControlName].

Question

J'utilise matInput y mat-form-field (@angular/material) dans un composant Angular, et je ne parviens pas à désactiver l'élément matInput .

Un exemple fonctionnel peut être vu ici.

Il est probable que je manque quelque chose d'évident, mais je n'arrive pas à trouver quoi. Est-ce un bug ?

Si je retire [formControlName] de la CustomFormInputComponent alors je peux désactiver avec succès le matInput

CustomFormInputComponent :

import { Input, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-custom-form-input',
  template: `
    <mat-form-field [formGroup]="form">
      <input matInput placeholder='Name' [formControlName]="formControlName" [disabled]='disabled'>
    </mat-form-field>
  `,
})
export class CustomFormInputComponent  {
  @Input() form: FormGroup;
  @Input() formControlName: string = 'name';
  @Input() disabled = false;
}

AppComponent :

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <p>At least one of these inputs should be disabled, but none are :(</p>

    <app-custom-form-input [form]="form" [disabled]='true'></app-custom-form-input>

    <app-custom-form-input [form]="form" [disabled]="'disabled'"></app-custom-form-input>
  `,
})
export class AppComponent  {
  public form: any;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: ''
    })
  }
}

Tout commentaire est le bienvenu !

Réponse :

Pour un peu plus de contexte sur la réponse de David : Angular met à jour l'état du DOM en fonction de l'état désactivé d'un contrôle de formulaire réactif. Ce que je pense qu'il se passe : angular rend le contrôle de formulaire CustomFormInputComponent avant le AppComponent et rend le composant comme désactivé. Ensuite, l'AppComponent est rendu et l'élément form est construit avec le name contrôle activé. Angular va ensuite désactiver l'élément d'entrée DOM (qui se comporte comme prévu).

Answer 1

Si vous utilisez un FormGroup, vous ne devez pas désactiver le formulaire dans le modèle HTML. Cela ne fonctionnera pas si vous essayez de le désactiver dans le HTML avec le FormControl. Au lieu de cela, cela doit être fait dans le FormGroup. Essayez ceci :

  template: `
    <mat-form-field [formGroup]="form">
      <input matInput placeholder='Name' [formControlName]="formControlName">
    </mat-form-field>
  `

et :

ngOnInit() {
    this.form = this.fb.group({
        name: new FormControl({ value: '', disabled: this.disabled })
    });
}

Aussi...pas un gros problème mais...vous devriez vraiment le faire :

public form: FormGroup;

au lieu de :

public form: any;

N'oubliez pas non plus l'importation

import { FormGroup, FormControl } from '@angular/forms';

En outre, le nom figurant dans la déclaration du groupe de formulaires doit correspondre à celui que vous avez défini dans le code HTML. Ainsi :

<input formControlName="myInputName">

et

this.form = this.fb.group({
    myInputName....
});

Answer 2

J'ai eu le même problème et je l'ai résolu avec la directive *ngIf. Si l'entrée doit être désactivée, désactivez-la, supprimez son lien avec le formulaire et donnez-lui une valeur manuellement. Si elle ne l'est pas, utilisez votre formControl tel qu'il est.

C'est votre modèle :

<mat-form-field [formGroup]="form">
  <input matInput placeholder='Name' [formControlName]="formControlName" [disabled]='disabled'>
</mat-form-field>

le changer avec :

<mat-form-field *ngIf="disabled">
  <input matInput placeholder='Name' [value]="form.formControlName" disabled='true'>
</mat-form-field>
<mat-form-field *ngIf="!disabled" [formGroup]="form">
  <input matInput placeholder='Name' [formControlName]="formControlName">
</mat-form-field>

Answer 3

--> sortie Essayez ceci.

fichier .html

   <form name="fg" [formGroup]="fg" >
        <mat-form-field >
                  <input matInput placeholder="Email" formControlName="email">
           </mat-form-field>
    </form>

fichier .ts importez ce fichier : import { FormBuilder, FormGroup, Validators } from '@angular/forms';

constructor(private _formBuilder: FormBuilder) { }

   this.fg= this._formBuilder.group({
        email :[
            {
              value : 'vijay@gmail.com',
              disabled: true
            },
Validators.required
        ],

Answer 4

Si vous utilisez un FormGroup, vous devez utiliser la fonction "disabled promerty" pour créer votre FormGroup/FormControl :

name: new FormControl({ value: '', disabled: this.disabled })

Mais si vous voulez désactiver/activer, vous pouvez utiliser ceci dans votre HTML :

<input type="text" formControlName="name" [attr.disabled]="isDisabled == true ? true : null" />

Answer 5

Si vous utilisez du matériel, vous pouvez ajouter

<mat-form-field [formGroup]="form">
  <input matInput placeholder='Name' [formControlName]="formControlName" readOnly>
</mat-form-field>