Angular - FormControl n'est pas lié à formControlName correctement

Question

Je crée un modèle de formulaire manuellement en utilisant FormGroup & FormControl, c'est bien, mais j'obtiens un résultat inattendu quand angular lie mon FormControl à l'entrée correspondante.

Je crée le modèle et le lie au HTML de cette façon.

private initFormModel(user: User): FormGroup { 
 
    const _formGroup = new FormGroup({ 
 
    fullname: new FormControl({ value: user.name }) 
 
    }); 
 
    return _formGroup; 
 
}

<!-- This is part of the html code/I set on my component class this.form = this.initFormModel(... --> 
 

 
<form (ngSubmit)="onSubmit()" [formGroup]="form" novalidate> 
 

 
<!-- .... ---> 
 

 
<input type="text" formControlName="fullname" name="fullname">

Résultat

Il n'y a rien de mal, si vous me attendez d'utiliser FormBuilder cela ne change rien. J'ai [Object object] lié à mon entrée, la chose amusante est que si j'ajoute l'attribut désactivé à ma définition de contrôle de forme, cela fonctionnera bien. Comme: fullname: new FormControl({ value: user.name, disabled: false }) J'ai le texte lié, aussi Si j'utilise la notation Array pour créer le FormControl (fullname: [user.name, ...]).

Juste au cas où je suis actuellement en utilisant angulaire v2.4.10

Answer 1

De the documentation:

Lorsque instancier un FormControl, vous pouvez passer une valeur initiale comme premier argument. Exemple:

const ctrl = new FormControl('some value'); 

Vous pouvez également initialiser le contrôle avec un objet d'état de forme sur instanciation, qui comprend à la fois la valeur et si le contrôle est désactivé ou non. Vous ne pouvez pas utiliser la clé de valeur sans la clé désactivée; les deux sont nécessaires pour utiliser ce mode d'initialisation.

const ctrl = new FormControl({value: 'n/a', disabled: true}); 

(Souligné par l'auteur)