Question

我的申请表中有注册表格。但在此注册表格中，有一个可选的“密码”和“重复密码”输入。由于我不想使用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>

此页面通过选择器作为子项显示在多个页面上。将密码放在表单之外的顶部将是最懒惰的解决方案，但我必须更改一些代码才能实现。（加上它看起来不太好）所以我想知道是否有针对这个特定问题的解决方法。

Answer 1

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

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

Answer 2

如果您提供属性：

formControlName =“您的表单控件名称”

输入中的

然后它们可以像这样共存;

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

formControlName必须与FormGroup中提供的名称匹配

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

Answer 3

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

在FormGroup

MCVE

3 个答案: