Ne peut pas désactiver matInput avec élément [formControlName]

Je suis en utilisant matInput et mat-form-field (@angulaire/matériel) dans Angulaire de la composante, et je ne peux pas désactiver le matInput.

Un exemple peut être vu ici.

Il semble probable que je suis absent quelque chose d'évident, mais pour la vie de moi je ne peux pas comprendre ce que. Est-ce un bug?

Si je supprime [formControlName] de la CustomFormInputComponent, alors je peux réussir à désactiver 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: ''
    })
  }
}

De toutes les suggestions sont grandement appréciés!

Réponse

Pour un peu plus de contexte sur David réponse: Angulaire des mises à jour DOM l'état fondée sur le handicap d'un réactif de contrôle de formulaire. Ce que je pense qui se passe: angulaire est rendu le CustomFormInputComponent avant la AppComponent et est rendu le composant désactivé. Puis le AppComponent est rendue et la form est construit avec la name control est activé. Angulaire va alors et onu-désactivé DOM l'élément d'entrée (ce qui est le comportement comme prévu).

InformationsquelleAutor John | 2018-01-25

14

Si vous utilisez un FormGroup, alors vous ne devez pas désactiver la forme dans le Modèle HTML. Il ne fonctionnera pas si vous essayez de le désactiver dans le HTML avec FormControl. Au lieu de cela, il devrait être fait au sein de la 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 une grosse affaire, mais..vous devriez vraiment faire:
```
public form: FormGroup;
```
au lieu de:
```
public form: any;
```
N'oubliez pas l'importation ainsi
```
import { FormGroup, FormControl } from '@angular/forms';
```
Btw, le nom à l'intérieur du formulaire de déclaration de groupe doit correspondre à celui que vous avez défini dans le code HTML.
Donc:
```
<input formControlName="myInputName">
```
et
```
this.form = this.fb.group({
    myInputName....
});
```
- Sur quoi vous vous basez votre affirmation que "Si vous utilisez un FormGroup, alors vous ne devez pas désactiver la forme dans le Modèle HTML"? Pas le cas dans le réactif guide de formulaire est-ce dit, autant que je peux dire. À quoi vous fait penser le comportement je suis en train de vivre n'est pas un bug?
- Par exemple, plusieurs input éléments peuvent se lier au même contrôle de formulaire (je pense). Il n'est pas immédiatement évident pour moi pourquoi je ne pouvais pas désactiver une de ces entrées dans le code html, mais laissez le réactif de contrôle de formulaire activée, de sorte que les autres entrées de la liaison à il travaillait encore.
- Parce que, dans ce même guide, vous pouvez clairement voir que tous les validation sur des formes réactives est de prendre place dans la classe, et non dans le code HTML. Même quelque chose d'aussi simple que "nécessaire" est ajouté dans la classe de composant dans leurs exemples. Pas le cas dans leur guide est fait dans le code HTML.... Sinon pourquoi même utiliser des formes réactives
- Je pense que vous êtes un peu confus sur la façon FormControl, FormGroup travail.
- Aussi, il n'est même pas une affirmation. Angulaire a intégré dans la console d'avertissement qui dit en gros "HÉ, NE PAS le FAIRE, de le FAIRE DANS LA CLASSE". Ouvrez votre console lorsque vous tentez de désactiver une entrée avec formControlName et vous le verrez. Il est très clair qu'il n'est pas censé être désactivé dans ce sens.
- Bien Un), je n'avais pas remarqué que. Merci! B) "Nous recommandons l'utilisation de cette approche pour éviter de" a changé après avoir coché la case " erreurs." Clairement la désactivation via le DOM est pris en charge, sinon ils auraient dit "vous doit". Pas recommander. Mais cela ne semble pas expliquer ce qui se passe. Angulaire est (probablement) le rendu de l'élément d'entrée désactivé, puis en activant la suite lors de la création de l'élément parent.
- Non, plusieurs éléments ne peuvent pas partager le même FormControl. Recommandé signifie fondamentalement doit.Par exemple, il est recommandé de crypter des mots de passe. Mais ce n'est pas un must. Seriez-vous alors de ne pas chiffrer et de me dire "eh Bien, il est recommandé, il n'est pas un must...."
- C'est un bon point
- Mais si je change cela.valeur désactivé à faux - mon contrôle reste désactivé. Est-il un moyen de undisable le contrôle?
- Vous pouvez activer/désactiver les contrôles de formulaire par programmation par exemple this.printForm.controls['title'].enable(); ou this.printForm.controls['title'].disable()
InformationsquelleAutor David Anthony Acosta

-->sortie
essayez cette.

.fichier html

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

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

constructor(private _formBuilder: FormBuilder) { }



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

InformationsquelleAutor Vijay Prajapati

J'ai eu le même problème et je l'ai résolu avec *ngIf directive. Si l'entrée doit être désactivée, il handicapées, retirer sa forme contraignante et donner sa valeur manuellement. Si ce n'est pas, que l'utilisation de votre formControl comme il est.

C'est votre modèle:

HTML:

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

changer avec:

HTML:

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

InformationsquelleAutor boyukbas

0

Si vous utilisez FormGroup vous devez utiliser désactivé promerty de la création de votre FormGroup/FormControl:
```
name: new FormControl({ value: '', disabled: this.disabled })
```
Mais si vous voulez désactivé activer/vous pouvez l'utiliser dans votre code HTML:
```
<input type="text" formControlName="name" [attr.disabled]="isDisabled == true ? true : null" />
```
InformationsquelleAutor juanjinario

Vous devez vous connecter pour publier un commentaire.