angular - formcontrolname - ngmodel formgroup

Uso de[(ngModel)] dentro de FormGroup

Question

Tengo en mi solicitud un formulario de registro. Pero dentro de este formulario de registro hay una entrada opcional de ''contraseña'' y ''repetir contraseña''. Como prefiero no usar el objeto FormControl para recuperar estos 2 valores (otros valores están bien), me gustaría una solución para el uso de ngModel dentro de 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>

Esta página se muestra en varias páginas como un niño, a través del selector. Colocar las contraseñas en la parte superior, fuera del formulario sería la solución más perezosa, pero tendría que cambiar algún código para obtener eso. (además, no se ve bien) Así que me preguntaba si hay una solución para este problema específico.

Answer 1

Básicamente, puede especificar que el ngModel que está utilizando es independiente. Y usa algo como esto

 <input type="password" [(ngModel)] = "password" [ngModelOptions]="{standalone: true}" />

Answer 2

Si proporciona el atributo:

formControlName = "su nombre de control de formulario aquí"

en la entrada entonces pueden coexistir así;

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

El formControlName debe coincidir con el nombre proporcionado en su FormGroup

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