web-dev-qa-db-fra.com

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

J'utilise matInput et mat-form-field (@ angular/material) dans un composant angulaire et je ne peux pas désactiver la matInput.

Un exemple de travail peut être vu ici.

Il semble probable que je manque quelque chose d’évident, mais pour ma vie, je ne sais pas quoi. Est-ce un bug?

Si je supprime [formControlName] de la CustomFormInputComponent, je peux désactiver avec succès la 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: ''
    })
  }
}

Toutes les idées sont grandement appréciées!

Réponse

Pour un peu plus de contexte sur la réponse de David: Angular met à jour l'état DOM basé sur l'état désactivé d'un contrôle de formulaire réactif. Ce que je pense est en train de se produire: angular rend la CustomFormInputComponent avant la AppComponent et rend le composant désactivé. Ensuite, le composant AppComponent est rendu et la variable form est générée avec le contrôle name activé. Angular va ensuite et désactive l'élément d'entrée DOM (qui est le comportement tel que conçu).

angularangular-materialangular-material2
5
John

Si vous utilisez un groupe de formulaires, vous ne devez pas désactiver le formulaire dans le modèle HTML. Cela ne fonctionnera pas si vous essayez de désactiver en HTML avec FormControl. Au lieu de cela, cela devrait être fait dans le groupe de formulaires. Essaye ça:

  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 ... ce n'est pas grave, mais ... vous devriez vraiment faire:

public form: FormGroup;

au lieu de:

public form: any;

N'oubliez pas l'importation aussi

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

Btw, le nom à l'intérieur de la déclaration du groupe de formulaires doit correspondre à tout ce que vous avez défini dans le code HTML . Donc:

<input formControlName="myInputName">

et

this.form = this.fb.group({
    myInputName....
});
11
David Anthony Acosta

Si vous utilisez FormGroup, vous devez utiliser une promotion désactivée pour créer votre FormGroup/FormControl:

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

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

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