Использование [(ngModel)] внутри FormGroup

У меня в моей заявке есть регистрационная форма. Но в этой регистрационной форме есть необязательный ввод "пароль" и "повторный пароль". Поскольку я бы предпочел не использовать объект FormControl для извлечения этих двух значений (другие значения прекрасны), мне бы хотелось обходное решение для использования ngModel в пределах <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>

Эта страница отображается на нескольких страницах в виде дочернего элемента через селектор. Размещение паролей сверху, вне формы было бы самым ленивым решением, но мне пришлось бы изменить код, чтобы получить это. (плюс это не выглядит хорошо). Поэтому мне было интересно, если обходной путь для этой конкретной проблемы.

Ответ 1

В основном вы можете указать, что ngModel, который вы используете, является автономным. И используйте что-то вроде этого

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

Ответ 2

Если вы предоставите атрибут:

formControlName = "ваше имя управления формой здесь

на входе, то они могут сосуществовать так:

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

formControlName должен соответствовать имени, указанному в вашей группе форм

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

Ответ 3

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