我创建了一个名为threeNumbers的自定义验证器，它只接受三位数字。但是当我将其应用到username字段时，它会抛出错误ERROR TypeError: Cannot read property 'length' of null和
formGroup expects a FormGroup instance. Please pass one in.
ngOnInit() {
// form controls validation specicified in the class for the Reactive Forms
this.courseForm = this.fb.group({
username: [null, [Validators.required, this.threeNumbers.bind(this)]],
email: [null, [Validators.required, Validators.pattern('([a-zA-Z0-9_.-]+)@([a-zA-Z0-9_.-]+)\\.([a-zA-Z]{2,5})')]],
address: [null, [Validators.required, Validators.minLength(10), Validators.maxLength(100)]],
select: [null, [Validators.required]]
});
this.dropDownArr = this.dropdown.getData();
// this.personDetail = {
// name: '',
// email: '',
// address: '',
// chosenCourse: ''
// };
this.personDetail = this.fieldData.getPersonData();
console.log(this.courseForm);
}
threeNumbers(control: FormControl) {
if (control.value.length < 3 && typeof control.value !== 'number') {
return { 'greater than 3 numbers': true };
}
return null;
}
//HTML template
<!-- Form with three inputs and one dropdown which intializes with data from service on intialization and validates with min and maxlength-->
<section class="container">
<!-- ngSubmit calls the function onSubmit on submitting the form -->
<form class="form-horizontal" (ngSubmit)='onSubmit()' [formGroup]='courseForm'>
<div class="form-group">
<label for="inputUsername" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputUsername" placeholder="Username" formControlName="username" name="name"
[ngClass]="{inValid: !courseForm.get('username').valid && courseForm.get('username').touched, valid: courseForm.get('username').valid && courseForm.get('username').touched}">
<span class="help-block" *ngIf="!courseForm.get('username').valid && courseForm.get('username').touched">Please enter a valid username</span>
</div>
</div>
<!-- username input ends here -->
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<!-- CSS class applied based on validation -->
<input type="email" class="form-control" id="inputEmail" placeholder="Email" formControlName="email" name="email" [ngClass]="{inValid: !courseForm.get('email').valid && courseForm.get('email').touched, valid: courseForm.get('email').valid && courseForm.get('email').touched}">
<span class="help-block" *ngIf="!courseForm.get('email').valid && courseForm.get('email').touched">Please Enter a valid email</span>
</div>
</div>
<!-- email input ends here -->
<div class="form-group">
<label for="inputAddress" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputAddress" placeholder="Your Address" formControlName="address" name="address"
[ngClass]="{inValid: !courseForm.get('address').valid && courseForm.get('address').touched, valid: courseForm.get('address').valid && courseForm.get('address').touched}">
<!--Display error message on MinLength and MaxLength Validation-->
<span class="help-block" *ngIf="courseForm.get('address')?.errors?.required && courseForm.get('address').touched">Please Enter Your Address</span>
<span class="help-block" *ngIf="(courseForm.get('address')?.errors?.minlength?.requiredLength !== courseForm.get('address')?.errors?.minlength?.actualLength) && courseForm.get('address')?.touched">Address should be at least 10 characters long</span>
</div>
</div>
<!-- address input ends here -->
<div class="form-group">
<label for="sel1" class="col-sm-2 control-label">Choose Course</label>
<div class="col-sm-10">
<select class="form-control" id="sel1" formControlName="select" [(ngModel)]="selectedOption" name="select" [ngClass]="{inValid: !courseForm.get('select').valid && courseForm.get('select').touched, valid: courseForm.get('select').valid && courseForm.get('select').touched}">
<option [value]="selectedOption" [disabled]="true">Choose Your Course</option>
<option *ngFor="let data of dropDownArr; index as i" [ngValue]="data.course">{{data.course}}</option>
</select>
<span class="help-block" *ngIf="!courseForm.get('select').valid && courseForm.get('select').touched">Please choose a Course</span>
</div>
</div>
<!-- select input ends here -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" [disabled]=!courseForm.valid>Submit</button>
<button type="button" class="btn btn-default" (click)="resetForm(f)">Reset</button>
</div>
</div>
<!-- submit and reset buttons ends here -->
</form>
</section>
<!-- section displays the submited form data in the view -->
<section class="container">
<div class="panel panel-default">
<div class="panel-heading">Registered users</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item" *ngFor="let person of personsList">username: {{person.name}} | email: {{person.email}}
| Address: {{person.address}} |
Course Chosen: {{person.chosenCourse}}</li>
</ul>
</div>
</section>
答案 0 :(得分：0)
与内置验证器一样，您无需致电threeNumbers，只需将其作为对this.fb.group的引用传递：
您不需要bind调用，因为Angular会在内部调用它。将其更改为：
this.courseForm = this.fb.group({
username: ['', [Validators.required, this.threeNumbers]],
email: ['', [Validators.required, Validators.pattern('([a-zA-Z0-9_.-]+)@([a-zA-Z0-9_.-]+)\\.([a-zA-Z]{2,5})')]],
address: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(100)]],
select: ['', [Validators.required]]
});
目前，您绑定了this属性。在这种情况下，this指的是您实例化的类版本。
基本上删除括号。
你可以加倍努力使你的threeNumbers方法保持静态，因为验证器不应该依赖任何局部变量 - Angular默认验证器是静态的。
public static ThreeNumbers(control: FormControl) {
if (control.value.length < 3 && typeof control.value !== 'number') {
return { 'greater than 3 numbers': true };
}
return null;
}
我还建议将空字符串''而不是null传递给每个控件初始化。这有助于实现一致的状态。注：在那个注释中，你有一个'typeof'检查，如果这个FormControl被绑定到一个输入，那么typeof将永远是一个字符串。
我已经修正了 - 见上文。