在FormGroup中使用[[ngModel)] [英] Use of [(ngModel)] within FormGroup

问题描述

我的申请书中有一张注册表.但是在此注册表格中，有一个可选的密码"和重复密码"输入.由于我宁愿不使用FormControl对象来检索这2个值(其他值也可以)，我想在<form>

I have in my application a registration form. But within this registration form there is an optional 'password' and 'repeat password' input. Since I'd rather not use the FormControl object to retrieve these 2 values (other values are fine), I would like a workaround for the usage of ngModel within a <form>

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>

---

通过选择器，该页面在多个页面上显示为子页面.将密码放在表格之外的顶部是最懒惰的解决方案，但是我必须更改一些代码才能做到这一点. (加上它看起来不太好)，所以我想知道是否存在针对此特定问题的解决方法.

---

This page is shown on multiple pages as a child, via a selector. Placing the passwords on top, outside of the form would be the laziest solution, but I'd have to change some code to get that. (plus it doesn't look good) So I was wondering if there's a workaround for this specific issue.

推荐答案

您可以基本上指定所使用的ngModel是独立的.并使用类似的东西

You can basically specify that the ngModel you are using is standalone. And use something like this

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

这篇关于在FormGroup中使用[[ngModel)]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！