在FormGroup中使用[[ngModel)]
我的申请书中有一张注册表.但是在此注册表格中,有一个可选的密码"和重复密码"输入.由于我宁愿不使用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}" />