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

我试图验证我的表单中的password和ConfirmPassword字段是否相同，但是当我在SO上添加其他帖子提供的验证时（除了将ControlGroup更改为FormGroup），我会不断得到

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

但是，当我不使用下面的“matchingPassword”组进行验证，而只使用Validators.required语法时，它就可以正常工作

我不知道为什么它会抛出那个错误。还有其他人经历过吗？我目前正在Angular 4发行版上构建

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>

当前密码：
新密码：
你需要一个安全的密码。
确认新密码：
安全问题：
{{question.SecurityQuestionText}
保安问题答案:
更改地址

问题在于您有一个嵌套的

表单组

（

匹配密码

）

因此，例如，必须使用

包装此嵌套组的控件

将密码控件（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>

...    
...

问题在于您有一个嵌套的

表单组

（

匹配密码

）

因此，例如，必须使用

包装此嵌套组的控件

将密码控件（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>

...    
...

除了developer033指出的问题之外，您还缺少

表单组名

：

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

我真的不知道为什么，但我更喜欢更“干净”的版本：

因此，更改这些将使自定义验证器启动

然后对自定义验证器来说，这就是我的方法。还请注意，我将

areEqual:true

更改为

notEqual:true

，以便更好地描述实际发生的情况，因为当我们返回

null

时，意味着密码匹配，如果我们返回的不是

null

，则意味着我们要标记密码不匹配

equalPasswords = (control: AbstractControl): {[key: string]: boolean} =>{
  const newPassword = control.get('NewPassword');
  const confirmPassword = control.get('ConfirmPassword');

  if (!newPassword || !confirmPassword) {
    return null;
  }

  return newPassword.value === confirmPassword.value ? null : { notEqual: true };
}    

---

这里有一个的代码缩写版本。

除了developer033所述的问题之外，您还缺少

表单组名

：

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

我真的不知道为什么，但我更喜欢更“干净”的版本：

因此，更改这些将使自定义验证器启动

然后对自定义验证器来说，这就是我的方法。还请注意，我将

areEqual:true

更改为

notEqual:true

，以便更好地描述实际发生的情况，因为当我们返回

null

时，意味着密码匹配，如果我们返回的不是

null

，则意味着我们要标记密码不匹配

equalPasswords = (control: AbstractControl): {[key: string]: boolean} =>{
  const newPassword = control.get('NewPassword');
  const confirmPassword = control.get('ConfirmPassword');

  if (!newPassword || !confirmPassword) {
    return null;
  }

  return newPassword.value === confirmPassword.value ? null : { notEqual: true };
}    

---

这里有一个代码的缩写版本。

嗯，我没有提到他的函数不正确的事实，因为我认为这只是一个示例，他之前只是试图修复模板错误。关于更干净的版本，我同意你的说法，但是我更喜欢在组件文件中创建一个引用，并像这样使用

[formControl]=“myVariableCtrl”

：）这只是偏好的问题。是的，这是偏好的问题，因此我说我更喜欢P但是是的，我认为这个函数是OP使用的，所以我只是想同时处理这个问题（读：我很无聊）：D@developer033啊，忘了给你贴标签了：嗯，我没有提到他的函数是不正确的，因为我认为这只是一个例子，他之前只是试图修复模板错误。关于更干净的版本，我同意你的说法，但是我更喜欢在组件文件中创建一个引用，并像这样使用

[formControl]=“myVariableCtrl”

：）这只是偏好的问题。是的，这是偏好的问题，因此我说我更喜欢P但是是的，我认为这个函数是OP使用的，所以我只是想同时处理这个问题（读：我很无聊）：D@developer033啊，忘了给你贴标签了：P