javascript - 验证相同的密码输入 Angular 2/4 - 错误找不到具有未指定名称属性的控件

Question

我正在尝试验证表单中的密码和 ConfirmPassword 字段是否相同，但是当我在 SO 上添加其他帖子提供的验证时(除了将 ControlGroup 更改为 FormGroup 之外)我不断得到

错误:找不到具有未指定名称属性的控件

但是，当我不使用下面的“matchingPassword”组进行验证而只使用 Validators.required 语法时，它工作得很好。

我不知道为什么会抛出该错误。还有其他人解决过这个问题吗？我目前正在构建 Angular 4 Distro。

constructor(
private accountService: accountService,
fb: FormBuilder,
) {
    this.changePWForm = fb.group({
        'CurrentPassword' : [null, Validators.required],
        'SecurityQuestions' : [null, Validators.required],
        'SecurityQuestionAnswer' : [null, Validators.required],
         'matchingPassword': fb.group({
                'NewPassword' : [null, Validators.compose([Validators.pattern(this.strongPW), Validators.required])],
                'ConfirmPassword' : [{disabled: true}, Validators.required],
            }, {validator: this.equalPasswords})

    })


}

equalPasswords(group: FormGroup){
   //When I use the syntax above, it never makes it here.
    var valid = false;

        for (var name in group.controls) {
            var val = group.controls[name].value


        }

        if (valid) {
            return null;
        }

        return {
            areEqual: true
        };

}

这是我的 HTML 模板

 <form [formGroup]="changePWForm" (ngSubmit)="updatePW(changePWForm.value)" *ngIf="securityQuestions">
            <div class="form-group">
            <label>Current Password:</label>
            <input type="text" [(ngModel)]="changePWData.CurrentPassword" [formControl]="changePWForm.controls['CurrentPassword']">
            </div>
            <div class="form-group">
            <label>New Password:</label>
            <input type="text" [(ngModel)]="changePWData.NewPassword" [formControl]="changePWForm.controls['NewPassword']">
            <small *ngIf="!changePWForm.controls.NewPassword.valid && !changePWForm.controls.NewPassword.pristine">You need a secure password.</small>
            </div>
            <div class="form-group" >
            <label>Confirm New Password:</label>
            <input type="text" [(ngModel)]="changePWData.ConfirmPassword" [formControl]="changePWForm.controls['ConfirmPassword']">
            </div>
            <div class="form-group">
            <label>Security Question:</label>
            <select #select type="text" [(ngModel)]="selectedSecurityQuestion" [formControl]="changePWForm.controls['SecurityQuestions']" class="select">
                <option *ngFor="let question of securityQuestions" [ngValue]="question">{{question.SecurityQuestionText}}</option>
            </select>
            </div>
            <div class="form-group">
            <label>Security Question Answer: </label>
            <input type="text" [(ngModel)]="securityQuestionAnswer" [formControl]="changePWForm.controls['SecurityQuestionAnswer']">
            </div>
            <div *ngIf="processing">
                    <div class="spinner">
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div>

            </div>
            <button *ngIf="!processing" type="submit" [disabled]="!changePWForm.valid">Change Address</button>
        </form>

Answer 1

问题是你有一个嵌套的 FormGroup (matchingPassword)。

因此，您必须使用 <div> 包裹这个嵌套 组的控件。 ，例如。

将您的密码控件(NewPassword 和 ConfirmPassword)包装在一个元素中，如下所示:

<form [formGroup]="changePWForm" ...>    
  ...    
  <div formGroupName="matchingPassword">
    <!-- you can also use [formGroup] if you want -->
    <!-- Put the content of password controls here -->
  </div>
  ...
</form>