L'utilisation de [(ngModel)] dans FormGroup

J'ai dans mon application un formulaire d'inscription. Mais à l'intérieur de ce formulaire d'inscription, il y a une option "mot de passe" et "répéter le mot de passe' entrée. Depuis, je préfère ne pas utiliser le FormControl objet à récupérer ces 2 valeurs (les autres valeurs sont bien), je voudrais une solution de contournement pour l'utilisation de ngModel dans un <form>

MCVE

TS:

public password: string = '';
public passwordRe: string = '';
public registrationForm;

constructor(public fb: Formbuilder) {
    this.registrationForm = this.fb.group({
        'firstname' : [null, Validators.required],
        'lastname': [null, Validators.required]
    });
}

HTML

<form [formGroup]="registrationForm" (ngSubmit)="doSomething()">
    <div class="form-group"
            [ngClass]="{'has-error':!registrationForm.controls['firstname'].valid 
                && registrationForm.controls['firstname'].touched}">
        <label>Firstname: *</label>
        <input class="form-control" type="text" placeholder="Firstname" [formControl]="registrationForm.controls['firstname']"/>
    </div>

    <div class="form-group"
            [ngClass]="{'has-error':!registrationForm.controls['lastname'].valid 
                && registrationForm.controls['lastname'].touched}">
        <label>Lastname: *</label>
        <input class="form-control" type="text" placeholder="Lastname" [formControl]="registrationForm.controls['lastname']"/>
    </div>

    <!-- NG MODELS -->

    <input type="password" [(ngModel)]="password"/>
    <input type="password" [(ngModel)]="passwordRe" />

    <input type="submit" value="Some submit button"/>
</form>

Cette page est indiqué sur plusieurs pages comme un enfant, par l'intermédiaire d'un sélecteur. En plaçant les mots de passe sur le dessus, à l'extérieur de la forme que pourrait être le plus paresseux de la solution, mais j'ai dû changer un peu de code pour l'obtenir. (de plus, il n'a pas l'air bon) Donc je me demandais si il existe une solution de contournement pour ce problème spécifique.

InformationsquelleAutor Ivar Reukers | 2017-01-09

49

Vous pouvez spécifier que le ngModel que vous utilisez est autonome. Et utiliser quelque chose comme cela

HTML:
```
 <input type="password" [(ngModel)] = "password" [ngModelOptions]="{standalone: true}" />
```
- Merci monsieur, j'ai eu un problème avec ce bien.
- Je vous remercie Monsieur. Je ne sais jamais sur cette option : ngModelOptions
InformationsquelleAutor Hasan Wajahat
0

Si vous fournir l'attribut:

formControlName = "votre formulaire de contrôle nom ici"

dans l'entrée alors qu'ils peuvent co-exister comme;
```
<input type="password"
       [(ngModel)] = "password"
       formControlName = "password"/>
```
La formControlName doit correspondre au nom qui figure dans votre FormGroup
```
this.formGroup = this._formBuilder.group({
  'password': new FormControl(this.password, [
     Validators.required,
     Validators.minLength(4)
  ])
});
```
- Avis - la prise en charge de la ngModel entrée de la propriété et ngModelChange événement avec réactif formulaire de directives a été dépréciée dans Angulaire v6 et sera supprimée dans Angulaire v7.
InformationsquelleAutor Stacker-flow
0

HTML:
```
 <input type="password" [(ngModel)] = "password" [ngModelOptions]="{standalone: true}" />
```
- Si possible, essayez de fournir une explication, et il va aider les autres à comprendre ce qui se passe.
- s'il vous plaît aller à travers le lien suivant certainement vous comprendrez
- autonome: si la valeur est true, la ngModel ne va pas s'inscrire avec son formulaire parent, et agit comme si elle n'est pas dans la forme. Par défaut à false.
InformationsquelleAutor Harsha Vardhan Reddy N

Vous devez vous connecter pour publier un commentaire.