web-dev-qa-db-fra.com

Utilisation de [(ngModel)] dans FormGroup

J'ai dans ma demande un formulaire d'inscription. Mais dans ce formulaire d'inscription, il y a une entrée optionnelle 'mot de passe' et 'répétition du mot de passe'. Puisque je préfère ne pas utiliser l'objet FormControl pour récupérer ces 2 valeurs (les autres valeurs conviennent), 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 affichée sur plusieurs pages en tant qu’enfant, via un sélecteur. Placer les mots de passe au-dessus du formulaire serait la solution la plus paresseuse, mais je devrais changer le code pour l'obtenir. (en plus, ça n'a pas l'air bien) Je me demandais donc s'il y avait une solution de contournement pour ce problème spécifique.

angulartypescriptangular2-forms
16
Ivar Reukers

Si vous fournissez l'attribut:

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

à l'entrée, ils peuvent alors coexister comme tel;

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

La formControlName doit correspondre au nom fourni dans votre groupe de formulaires.

this.formGroup = this._formBuilder.group({
  'password': new FormControl(this.password, [
     Validators.required,
     Validators.minLength(4)
  ])
});
0
Stacker-flow