我正在尝试以模型驱动的形式创建自定义验证器，这是实现它的正确方法

Question

实现我的代码时，我会在控制台中遇到以下错误

错误：找不到名称的控件：'密码' 在_throterror(forms.js：1732( 在setupcontrol(forms.js：1640( 在formgroupdiratection.push ../node_modules/@angular/forms/fesm5/forms.js.js.s.formgroupdirective.addcontrol(forms.js：4454( at FormControlname.push ../node_modules/@angular/forms/forsm5/forms.js.j.s.formcontrolname._setupcontrol(forms.js：4959( 在FormControlname.push ../node_modules/@angular/forms/forsm5/forms.js.s.s.formcontrolname.ngonchanges(forms.js：4909( 在checkandupdatedireatextionline(core.js：9244( 在checkandupdatenodeinline(core.js：10512( 在CheckAndUpDatenode(Core.JS：10474( 在debugcheckandupdatenode(core.js：11107( 在debugcheckdirectivesfn(core.js：1106

(

我试图通过对密码和repassword控件进行分组来创建一个新的表格组，但对我不起作用。

add-organization.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-add-organization',
  templateUrl: './add-organization.component.html',
  styleUrls: ['./add-organization.component.css']
})
export class AddOrganizationComponent implements OnInit {
     myform: FormGroup;
     passwords: FormGroup;
     organizationName: FormControl;
     organizationAddress: FormControl;
     pinCode: FormControl;
     mobileNumber: FormControl;
     organizationType: string[] = ["WholeSale","Retail"];
     businessType: FormControl;
     ownerName: FormControl;
     password: FormControl;
     rePassword: FormControl;
     telephoneNumber: FormControl;
     gstin: FormControl;


  createFormControls() {
     this.organizationName = new FormControl("", Validators.required);
     this.ownerName = new FormControl("", Validators.required);
     this.organizationAddress = new FormControl("", Validators.required);
     this.pinCode = new FormControl("", Validators.required);
     this.mobileNumber = new FormControl("", Validators.required);
     this.telephoneNumber = new FormControl();
     this.businessType = new FormControl("", Validators.required);
     this.gstin = new FormControl("", [Validators.required]);
     this.passwords = new FormGroup({
      password: this.password = new FormControl("",[Validators.required,Validators.minLength(8)]),
      repassword: this.rePassword = new FormControl("",[Validators.required])
      },{ validators: this.passwordValidator }
      )
  }
  passwordValidator(fb: FormGroup) {
    let password  = fb.controls.password.value;
    let repass = fb.controls.repassword.value; 
      if (repass !== password) {
        return {
          passwordMatch: {
            passwordMatch: password
          }
        }
      }
    return null;
  } 
  createForm() {
    this.myform = new FormGroup({
    ownerName: this.ownerName,
    organizationName: this.organizationName,
    organizationAddress: this.organizationAddress,
    pinCode: this.pinCode,
    mobileNumber: this.mobileNumber,
    telephoneNumber: this.telephoneNumber,
    businessType: this.businessType,
    gstin: this.gstin,
    }); 
  }
  onSubmit() {
    if (this.myform.valid) {
      console.log("Form Submitted!");
      console.log(this.myform.value);
      this.myform.reset();
    }
  }

  constructor() { }
  ngOnInit() {
    this.createFormControls();
    this.createForm();
  }
}

add-organization.html

    <mat-form-field>
            <input matInput placeholder="Set password" type = "password" formControlName="password">
            <mat-error *ngIf="password.errors?.required">Password is required</mat-error>
            <mat-error *ngIf="password.errors?.minlength">
                Password must be {{password.errors.minlength.requiredLength}} characters long, we need another {{password.errors.minlength.requiredLength - password.errors.minlength.actualLength}} characters
            </mat-error>
          </mat-form-field>
          <mat-form-field>
            <input  matInput placeholder="Re-Enter password" type = "password" formControlName="rePassword">
            <mat-error *ngIf="rePassword.errors?.required">Password is required</mat-error>
            <mat-error *ngIf="passwords.validators.passwordValidator">not match</mat-error>
   </mat-form-field>

我希望如果密码和repassword都不相同，则会显示出错误消息

Answer 1

您已经两次创建了Form。一次，使用createFormControls()中的所有控件。createForm()中的另一个。CreateForm没有password字段，因此它不会创建密码控件，因此HTML在创建具有名称password的FormControl时会引发错误。

您在createForm()中需要的是patchValue()以更新控件的值而不更改表单的结构。

Answer 2

它唯一的建议。创建FormGroup时，您可以直接使用

this.myform = new FormGroup({
    ownerName: new FormControl('',Validators.Required),
    organizationName: new FormControl('',Validators.Required),
    organizationAddress: new FormControl('',Validators.Required),
    pinCode: new FormControl('',Validators.Required),
    mobileNumber: new FormControl('',Validators.Required),
    telephoneNumber: new FormControl(''),
    businessType: new FormControl('',Validators.Required),
    gstin: new FormControl('',Validators.Required),
    password:new FormGroup({
      password: new FormControl("",[Validators.required,Validators.minLength(8)]),
      repassword: this.rePassword = new FormControl("",[Validators.required])
      },{ validators: this.passwordValidator }
      )
    }); 

如果您使用{validators：this.passwordvalidator}您的函数被声明为

passwordValidator(formGroup:FromGroup)
{ 
     ....
}

如果使用{validators：this.passwordvalidator((}//＆lt; - 请参阅((

passwordValidator()
{
  return (formGroup:FromGroup)=>
  { 
     ....
  }
}

Answer 3

这就是我这样做的方式：

function passwordValidator() { // wrapper fn
  return (ctrl: AbstractControl) => { // return the function w abstractControl
    const fb = ctrl as FormGroup; //type it
    const passwordCtrl  = fb.get('password'); // get the ctrls
    const repassCtrl = fb.get('repassword'); 
    if (!passwordCtrl || !repassCtrl) // handle errors!
      throw new Error('need password and repass controls');
    if (passwordCtrl.value // make sure forms have values (required error should show in this case, not pass match)
          && repassCtrl.value 
          && repassCtrl.value !== passwordCtrl.value) {
      return {
        passwordMatch: password //redunant
      }
    }
    return null;
  }
}

定义组件外部(因此可以重复使用(，然后使用：

{ validators: [passwordValidator()] }

但是，当您建立组时，您的错误确实在这里：

this.passwords = new FormGroup({
  password: new FormControl("",[Validators.required,Validators.minLength(8)]),
  repassword: new FormControl("",[Validators.required])
  },{ validators: [passwordValidator()] }
)

您只是无法按照自己的方式构建形式。您应该更定义密码和repassword变量：

get password() { return this.passwords.get('password');
get repassword() { return this.passwords.get('repassword');

要使错误出现(在垫子错误字段中(出现，然后您需要将此奇怪的东西添加到您的组件中：

parentErrorMatcher = {
  isErrorState(control: FormControl): boolean {
    return control.parent.invalid && control.touched;
  }
};

然后在要显示错误的表单字段上使用它：

<mat-form-field [errorStateMatcher]="parentErrorMatcher">

这将导致错误状态反映父母而不是子