【发布时间】：2019-10-03 11:47:39
【问题描述】：
我正在使用角度响应式表单验证，但遇到了一个意想不到的问题。我创建了一个内置验证器来过滤掉文本区域中的受限单词。该代码应该识别受限单词，如果它们出现在 textarea 上，它会将 textarea 标记为无效并在 textarea 顶部显示错误消息，即 “Restricted words found: foo, bar” textarea 有其他验证，例如 required 和 maxLength(400)，它们可以正常工作并显示错误消息。我遇到的问题只发生在自定义验证器上。尽管 textarea 正确识别了受限制的单词并将该字段标记为无效，但不会显示错误消息。可能是什么问题？我没有从 npm 或控制台收到错误。
这是我的组件类：create-session.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ISession, restrictedWords } from '../shared/index';
@Component({
templateUrl: 'create-session.component.html',
styles: [`
em { float: right; color: #E05C65; padding-left: 10px; }
.error input, .error select, .error textarea { background-color: #E3C3C5; }
.error ::-webkit-input-placeholder { color: #999; }
.error ::-moz-placeholder { color: #999; }
.error :ms-input-placeholder { color: #999; }
`]
})
export class CreateSessionComponent implements OnInit {
newSessionForm:FormGroup
name:FormControl
presenter:FormControl
duration:FormControl
level:FormControl
abstract:FormControl
constructor() {}
ngOnInit() {
this.name = new FormControl('', Validators.required)
this.presenter = new FormControl('', Validators.required)
this.duration = new FormControl('', Validators.required)
this.level = new FormControl('', Validators.required)
this.abstract = new FormControl('', [Validators.required, Validators.maxLength(400), restrictedWords(['foo', 'bar'])])
this.newSessionForm = new FormGroup({
name: this.name,
presenter: this.presenter,
duration: this.duration,
level: this.level,
abstract: this.abstract
})
}
saveSession(formValues) {
let session:ISession = {
id: undefined,
name: formValues.name,
duration: +formValues.duration,
level: formValues.level,
presenter: formValues.presenter,
abstract: formValues.abstract,
voters: []
}
console.log(session)
}
}
这是我的组件 html：create-session.component.html
<div class="col-md-12">
<h3>Create Session</h3>
</div>
<div class="col-md-6">
<form [formGroup]="newSessionForm" (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
<div class="form-group" [ngClass]="{ 'error': name.invalid && name.dirty}" >
<label for="sessionName">Session Name:</label>
<em *ngIf="name.invalid && name.dirty">Required</em>
<input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." />
</div>
<div class="form-group" [ngClass]="{ 'error': presenter.invalid && presenter.dirty}" >
<label for="eventDate">Presenter:</label>
<em *ngIf="presenter.invalid && presenter.dirty">Required</em>
<input formControlName="presenter" id="presenter" type="text" class="form-control" placeholder="presenter..." />
</div>
<div class="form-group" [ngClass]="{ 'error': duration.invalid && duration.dirty}" >
<label for="duration">Duration:</label>
<em *ngIf="duration.invalid && duration.dirty">Required</em>
<select formControlName="duration" class="form-control">
<option value="">select duration...</option>
<option value="1">Half Hour</option>
<option value="2">1 Hour</option>
<option value="3">Half Day</option>
<option value="4">Full Day</option>
</select>
</div>
<div class="form-group" [ngClass]="{ 'error': level.invalid && level.dirty}" >
<label for="level">Level:</label>
<em *ngIf="level.invalid && level.dirty">Required</em>
<select formControlName="level" class="form-control">
<option value="">select level...</option>
<option value="Beginner">Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
</select>
</div>
<div class="form-group" [ngClass]="{ 'error': abstract.invalid && abstract.dirty}" >
<label for="abstract">Abstract:</label>
<em *ngIf="abstract.invalid && abstract.dirty && abstract?.errors.required">Required</em>
<em *ngIf="name.invalid && name.dirty && abstract?.errors.maxlength">Cannot exceed 400 characters</em>
<em *ngIf="name.invalid && name.dirty && abstract?.errors.restrictedWords">
Restricted words found: {{abstract.errors.restrictedWords}}
</em>
<textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
</div>
<button type="submit" class="btn btn-primary" [disabled]="newSessionForm.invalid">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
</div>
这是我的自定义验证器：restricted-words.validator.ts
import { FormControl } from '@angular/forms';
export function restrictedWords(words) {
return (control: FormControl): {[key: string]: any} => {
if(!words) return null
var invalidWords = words
.map(w => control.value.includes(w) ? w : null)
.filter(w => w != null)
return invalidWords && invalidWords.length > 0
? {'restrictedWords' : invalidWords.join(', ')}
: null
}
}
如果有帮助，这里是一个 github repo：https://github.com/AshrafLobo/Angular-Demo
【问题讨论】：
标签： angular