Question

我这里有一个Angular反应形式。 https://stackblitz.com/edit/angular-form-array-duplicate-validation-xmctog?file=src/app/app.component.ts

当我尝试访问表单值时，在isNameDuplicate方法中出现错误。

错误TypeError：无法读取未定义的属性“ form” 在AppComponent.isNameDuplicate（app.component.ts：39）

引发错误的行在isNameDuplicate Validator中。

isNameDuplicate(c:AbstractControl)  
  {
    let value = c.value;
    console.log(value);
    const hasDuplicate:boolean = false;
    const userNames = this.form
    console.log(userNames);
    // const names = userNames.map(item=> item.username.trim());
    // const hasDuplicate = names.some(
    // (name, index) => names.indexOf(name, index + 1) != -1
  //);
    return null;
  }

此行const userNames = this.form引发错误，为什么我无法使用this.form访问表单？

如何解决这个错误？

Answer 1

您必须导出一个函数，然后引用它。根据{{3}}

/** A hero's name can't match the given regular expression */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {'forbiddenName': {value: control.value}} : null;
  };
}

此示例使水域带有双重负数。

禁止-因为它不能匹配正则表达式。

（正则表达式测试将为匹配返回true）

稍后请参见我的示例以获取更简单的答案。

...

ngOnInit(): void {
  this.heroForm = new FormGroup({
    'name': new FormControl(this.hero.name, [
      Validators.required,
      Validators.minLength(4),
      forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
    ]),
    'alterEgo': new FormControl(this.hero.alterEgo),
    'power': new FormControl(this.hero.power, Validators.required)
  });

...

  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>

...

如果有帮助，这是我做的一个简单的最小控件（ utils.ts ）

export function min(min: Number): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} => {
      const input = control.value,
      isValid = input < min;
      if(isValid) 
          return { 'minValue': {min} }
      else 
          return null;
    };
}

在Ionic App 3中使用。它与Angular 4的生命周期挂钩略有不同，但是对于您想要的就足够了。

import { FormBuilder, 
         FormControl,
         FormGroup, 
         Validators }       from '@angular/forms'; 
import { min }              from '../../util/util';
export class MachinesPage {
  constructor(
    private fb:FormBuilder
  ) {
     this.createPageForm();
  }

  private createPageForm():void {
    console.log('MachinesPage: createPageForm()');
    this.pnFG = this.fb.group({
      pageNumberInput: [this.spp.page,
                        Validators.compose([
                            Validators.required,
                            min(1)
                        ])
                      ]
    });
  }
...
}

有用的APi链接：

Answer 2

将上下文传递给验证器：

addCreds() {
  const creds = this.form.controls.credentials as FormArray;
  creds.push(this.fb.group({
    username: ['', {
      validators: [this.isNameDuplicate(this)],
      updateOn: 'blur'
    }],
    password: '',
  }));
}


isNameDuplicate(context): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    if (true) {
      console.log(context.form);
      return { 'valid': true };
    }
    return null;
  };
}

无法在验证器中读取表单组值

2 个答案: