TypeError：添加自定义验证器时无法读取未定义 Angular 的属性“indexOf”

Question

我尝试创建一个自定义验证器，如果用户名不在给定数组中，则它应该是有效的，否则它不应该是有效的

这里是html代码

    <div class="container">
  <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
    <div formGroupName="userData">
      <div class="form-group">
        <label for="username"><b>Username</b></label>
        <input
        type="text"
        id="username"
        formControlName="username"
        class="form-control">
        <span class="help-block"
          *ngIf="!signupForm.get('userData.username').valid && signupForm.get('userData.username').touched">enter
          valid username</span>
      </div>
      <div class="form-group">
        <label for="email"><b>Email</b></label>
        <input
        type="email"
        id="email"
        class="form-control"
        formControlName="email">
        <span class="help-block"
          *ngIf="!signupForm.get('userData.email').valid && signupForm.get('userData.email').touched"> enter valid email</span>
      </div>
    </div>
    <label for="gender"><b>Gender</b></label>
    <div class="radio" *ngFor="let gender of genders">
      <label>
        <input type="radio" name="gender" id="gender" [value]="gender" formControlName="gender"> {{gender}}
      </label>
    </div>
    <div formArrayName="hobbies">
      <h4>Hobbies</h4>
      <button mat-button class="btn btn-success" *ngIf="Controls.length==0" (click)="onAddHobby()">
        <mat-icon>add</mat-icon>
      </button>
      <div class="form-group"
       *ngFor="let hobbyControl of Controls;let i=index">
        <input type="text" class="form-control" [formControlName]="i">
        <div>
          <button mat-button class="btn btn-success" *ngIf="i==Controls.length-1" (click)="onAddHobby()">
            <mat-icon>add</mat-icon>
          </button>
          <button mat-button class="btn btn-danger" (click)="removeHobby(i)">
            <mat-icon>remove</mat-icon>
          </button>
        </div>
      </div>
    </div>
    <button type="submit" class="btn btn-primary"
      [disabled]="!signupForm.valid||Controls.length==0">Submit</button>
    <span class="help-block" *ngIf="!signupForm.valid && signupForm.touched">please enter valid data</span>

  </form>
</div>

这里是 ts 文件

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  genders = ['male', 'female'];
  signupForm: FormGroup;
  forbiddenUsernames: ['chaitu', 'vrk'];

  constructor() { }

  ngOnInit() {
    this.signupForm = new FormGroup({
      'userData': new FormGroup({
        'username': new FormControl(null, [Validators.required, this.forbiddenNames.bind(this)]),
        'email': new FormControl(null, [Validators.required, Validators.email])
      }),
      'gender': new FormControl('male'),
      'hobbies': new FormArray([])
    });
  }
  onSubmit() {
    console.log(this.signupForm.value);
    this.signupForm.reset();
  }
  forbiddenNames(control: AbstractControl): { [key: string]: boolean } {
    console.log(control.value);

    if (this.forbiddenUsernames.indexOf(control.value) !== -1) {
      return { 'name is forbidden': true };
    }
    return null;
  }
  onAddHobby() {
    const control = new FormControl(null, Validators.required);
    (<FormArray>this.signupForm.get('hobbies')).push(control);
  }

  get Controls() {
    return (this.signupForm.get('hobbies') as FormArray).controls;
  }

  removeHobby(num: number) {
    (<FormArray>this.signupForm.get('hobbies')).removeAt(num);
  }

}

问题似乎出在

 if (this.forbiddenUsernames.indexOf(control.value) !== -1) 

确切的错误：

core.js:4081 错误类型错误：无法读取未定义的属性“indexOf” 在 AppComponent.push../src/app/app.component.ts.AppComponent.forbiddenNames (app.component.ts:33) 在验证器.ts:478 在 Array.map() 在 _executeValidators (validators.ts:478) 在 FormControl.validator (validators.ts:438) 在 FormControl._runValidator (model.ts:672) 在 FormControl.updateValueAndValidity (model.ts:643) 在新的 FormControl (model.ts:1055) 在 AppComponent.push../src/app/app.component.ts.AppComponent.ngOnInit (app.component.ts:19) 在 callHook (core.js:2922)

请帮帮我..

Answer 1

你已经声明了forbiddenUserNames，但是你没有给它赋值-

forbiddenUsernames: ['chaitu', 'vrk'];

上面的代码应该是

forbiddenUsernames = ['chaitu', 'vrk'];