angular - TypeError:添加自定义验证器时无法读取未定义 Angular 的属性“indexOf”
问题描述
我尝试创建一个自定义验证器,如果用户名不在给定数组中,它应该是有效的,否则它不应该是有效的
这是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 错误类型错误:无法在验证器.ts 处读取 AppComponent.push../src/app/app.component.ts.AppComponent.forbiddenNames (app.component.ts:33) 处未定义的属性“indexOf”: 478 at Array.map () at _executeValidators (validators.ts:478) at FormControl.validator (validators.ts:438) at FormControl._runValidator (model.ts:672) at FormControl.updateValueAndValidity (model.ts:643) at AppComponent.push../src/app/app.component.ts.AppComponent.ngOnInit (app.component.ts:19) 处的新 FormControl (model.ts:1055) callHook (core.js:2922)
请在这件事上给予我帮助..
解决方案
你已经声明了forbiddenUserNames,但是你没有给它赋值——
forbiddenUsernames: ['chaitu', 'vrk'];
上面的代码应该是
forbiddenUsernames = ['chaitu', 'vrk'];
推荐阅读
- javascript - 输入 textarea 或 pre 时设置颜色格式
- excel - 如何计算多列中存在的项目的总和?
- sql - 查询写入最新更改的客户 ID
- python - 如何在fastapi中获取多个表单输入字段作为字典?
- python - 如何移动 JSON 中的日期以使日期相互冲突?
- python - 我如何除以列表 Y 中的变化?
- reactjs - 在反应中开发推送通知系统
- events - 谷歌日历 API。通过多个 extendProperty Private by Or 条件搜索事件
- javascript - 调用 toDataUrl() 时如何禁用 Fabric.js 中的图像平滑?
- angular - mat-tab-group - 将项目与中心、左右对齐