typescript 在 FormGroup 中使用 [(ngModel)]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41549426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use of [(ngModel)] within FormGroup
提问by Ivar Reukers
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 FormControlobject to retrieve these 2 values (other values are fine), I would like a workaround for the usage of ngModelwithin a <form>
我的申请中有一个注册表。但是在这个注册表单中有一个可选的“密码”和“重复密码”输入。由于我不想使用该FormControl对象来检索这 2 个值（其他值也可以），因此我想要一种解决方法，用于ngModel在<form>
MCVE
MCVE
TS:
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
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.
此页面作为子页面显示在多个页面上，通过选择器。将密码放在表单之外的顶部将是最懒惰的解决方案，但我必须更改一些代码才能获得它。（加上它看起来不太好）所以我想知道这个特定问题是否有解决方法。
回答by Hasan Wajahat
You can basically specify that the ngModel you are using is standalone. And use something like this
您基本上可以指定您使用的 ngModel 是独立的。并使用这样的东西
<input type="password" [(ngModel)] = "password" [ngModelOptions]="{standalone: true}" />回答by Stacker-flow
If you provide the attribute:
如果您提供属性：
formControlName = "your form control name here"
formControlName = "你的表单控件名称在这里"
in the input then they can co-exist like so;
在输入中，它们可以像这样共存；
<input type="password"
[(ngModel)] = "password"
formControlName = "password"/>
The formControlNamemust match the name provided in your FormGroup
在formControlName必须在FormGroup提供的名称相匹配
this.formGroup = this._formBuilder.group({
'password': new FormControl(this.password, [
Validators.required,
Validators.minLength(4)
])
});
回答by Harsha Vardhan Reddy N
<input type="password" [(ngModel)] = "password" [ngModelOptions]="{standalone: true}" />