我有这个验证器:
export const PasswordsEqualValidator = (): ValidatorFn => {
return (group: FormGroup): Observable<{[key: string]: boolean}> => {
const passwordCtrl: FormControl = <FormControl>group.controls.password;
const passwordAgainCtrl: FormControl = <FormControl>group.controls.passwordAgain;
const valid = passwordCtrl.value.password === passwordAgainCtrl.value.passwordAgain;
return Observable.of(valid ? null : {
passwordsEqual: true
});
};
};
以这种形式使用:
public signupForm: FormGroup = this.fb.group({
email: ['', Validators.required],
passwords: this.fb.group({
password: ['', Validators.required],
passwordAgain: ['', Validators.required]
}, {validator: CustomValidators.passwordsEqual()})
});
使用它的模板的一部分:
<div formGroupName="passwords">
<div class="form-control" [ngClass]="{error: !signupForm.get('passwords').valid}">
<label class="label" for="password">Password</label>
<input class="input" id="password" formControlName="password" type="password"> …我有两个自定义validator的reactive form，我叫下面的函数来创建组件构造函数形式：
private createForm(): void {
this.passwordUpdateForm = this.formBuilder.group({
newpassword : [null, Validators.required],
passwordconfirm: [null, Validators.required]
},
{
validator: [PasswordValidation.PasswordMatch, PasswordValidation.PasswordRule] // validation method
});
}
PasswordValidation是一个具有以下两个功能的类
export class PasswordValidation {
public static PasswordMatch(control: AbstractControl) {
let password = control.get('newpassword'); // to get value in input tag
if(password){
let confirmPassword = control.get('passwordconfirm').value; // to get value in input tag
if (password.value !== confirmPassword) {
control.get('passwordconfirm').setErrors({ ['passwordmatch'] : true});
}else {
return null;
}
}
} …custom-validators angular-validation angular angular-reactive-forms angular-forms
有一个自定义的输入组件，它以反应形式用于验证：
@Component({
moduleId: module.id.toString(),
selector: 'custom-select',
templateUrl: 'custom-select.component.html',
styleUrls: ['custom-select.component.css']
})
export class CustomSelectComponent {
@Input() public items: SelectModel[];
public model: SelectModel;
constructor(private customSelectService: CustomSelectService) {
this.customSelectService.Selected.subscribe((data: SelectModel) => {
this.model = data;
});
}
public newSelect(select: SelectModel): void {
this.customSelectService.updateSelected(select);
}
}
效果很好，我正在custom-select以反应形式使用，并希望按如下所示进行验证：
<custom-select id="country" [items]="selectItems" formControlName="country"></custom-select>
<div *ngIf=" myFrom.controls['country'].invalid && (myFrom.controls['country'].dirty
|| myFrom.controls['country'].touched) " class="ha-control-alert">
<div *ngIf="myFrom.controls['country'].hasError('required')">Country is required</div>
</div>
这就是我在组件中声明表格的方式
this.myFrom = this.formBuilder.group({
country: [null, Validators.required],
})
但是当我添加formControlName验证时，会出现错误，提示名称为'country'的表单控件没有值访问器。我该如何处理？
angular-validation angular angular-reactive-forms angular-forms
我想知道是否有可能以模糊的反应形式进行验证。目前，您可以进行设置，updateOn: "blur"但是输入字段的值不会在输入时更新。在我的情况下，我需要在每次击键时更新值，因为我会用它进行计算并将结果显示给用户。验证应仅在模糊时进行。
谢谢。
编辑：
我使用FormBuilder，一些内置的验证器和一些自定义的验证器。示例代码：
let formToMake = {
purpose: [null, Validators.required],
registrationDate: this.fb.group({
day: [null, Validators.required],
month: [null, Validators.required],
year: [null, Validators.required]
}),
isTruth: [null, Validators.compose([checkIfTrue, Validators.required])]
};
如果我要使用模糊事件，则需要手动进行所有验证，但我认为这不是一个好方法。
我正在使用 Angular 7 和材料设计组件
我需要将 requireMatch 验证添加到 mat-autocomplete 中。
我已经使用参数创建了自定义验证，但参数值确实会动态变化。
下面是我的组件代码。
this.stepFormGroup = this.formBuilder.group({
AccessCode: ["", [Validators.required, this.requireMatch(this.accessCodeList)]]
});
////require-match validation for access-code
requireMatch = (accessCodes: string[]) => {
return (control: FormControl) => {
const selection: any = control.value;
console.log("accessCodes", accessCodes, "selection", selection);
if (accessCodes.indexOf(selection)===-1) {
return { requireMatch: true };
}
return null;
}
}
accessCodes我面临的问题是我的内部总是空的（init）requireMatch。
的更改this.accessCodeList不会反映到验证器。
意味着更改后this.accessCodeList它不会在requireMatch验证器中获得更新的数组。
那么有人知道如何在自定义验证器中传递动态参数吗？
angular-validation angular angular-reactive-forms angular-validator
我开始创建我的第一个Angular 4应用程序。我正在测试表单验证。我创建了一个模板驱动的表单，并添加了一些验证器。
现在，我想显示一个字段的验证错误。这是我的实际代码：
<input id="name" name="name" class="form-control" required minlength="4" [(ngModel)]="name" #name="ngModel">
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 4 characters long.
</div>
</div>
恐怕要为表单中的每个输入都写上它！是否可以编写类似的内容（当然，我尝试了这段代码，但是没有用）：
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
<p *ngFor="let error on name.errors">{{error}}</p>
</div>
感谢您的帮助:)
如何清除表单控件上的错误。我有一种方法试图清除表单控件上的错误，但徒劳无功。
this.form.controls[ 'postalCode' ].setErrors(null);
表单控件名称是 postalCode，当我将错误设置为 null 时，它不会从该控件中删除错误。
我正在尝试为日期输入创建一个验证器。
所以我已经写了这段代码，但是没有按预期工作！
export class CustomValidators {
static dateMinimum(date: string): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
if (control.value == null) {
return null;
}
const controlDate = moment(control.value, FORMAT_DATE);
if (!controlDate.isValid()) {
return null;
}
const validationDate = moment(date);
return controlDate.isAfter(validationDate) ? null : {
'date-minimum': {
'date-minimum': validationDate.format(FORMAT_DATE),
'actual': controlDate.format(FORMAT_DATE)
}
};
};
}
}
我收到这个错误
ERROR Error: Expected validator to return Promise or Observable.at toObservable (forms.js:749)
我真的不知道哪件事是不正确的...我发现了很多示例，这些示例如何创建不带参数但不带参数的自定义验证器...
我需要像这样使用验证器：
this.projectForm = this.builder.group({
date: ['', Validators.required, CustomValidators.dateMinimum('2018-12-12')], …我对读取/编辑例程使用相同的组件。async-validator与新条目完美配合。如果用户不小心更改了值并尝试恢复到保存的值，问题就会开始。我当前的代码将无论如何运行并返回现有值。我想传递更多数据以及控制值，以便我可以验证该对值是否已经存在。
我正在发布相关代码，
这是我的form control，
patientEmail: new FormControl(
null,
[Validators.email, Validators.required],
FormControlValidator.createEmailAsyncValidator(
this.asyncValidatorService
),
),
我的异步验证器创建者类是，
export class FormControlValidator {
static createEmailAsyncValidator(asyncValidatorService: AsyncValidationService) {
return (control: AbstractControl) => {
if (!control.pristine) {
control.markAsPristine();
return asyncValidatorService
.validateEmailNotTaken(control)
.map((response: HttpResponse<boolean>) => {
return !response.body ? null : { taken: true };
});
}
return Observable.of(null);
};
}
最后是我的服务，
@Injectable()
export class AsyncValidationService {
constructor(private httpService: HttpClientService) {}
public validateEmailNotTaken(control: AbstractControl) {
return this.httpService.getRequest(
'PatientsRegistration/IsPatientEmailExist?email=' + control.value,
);
} …我有一个工作异步验证器，它向服务器发出 HTTP 请求以检查用户名是否已被占用。因为我不想在每次击键后调用 API，所以我需要对输入流进行去抖动。
我第一次参加throttleTime了这项服务，但是关于 SO 的另一个主题说这必须是订阅者，但还没有运气！
我的组件：
this.form = this._fb.group(
{
username: ['', [Validators.required, Validators.maxLength(50), NoWhitespaceValidator], [IsUserIdFreeValidator.createValidator(this._managementService)]]
});
我的验证器：
export class IsUserIdFreeValidator {
static createValidator(_managementService: ManagementService) {
return (control: AbstractControl) => {
return _managementService.isUserIdFree(control.value)
.pipe(
throttleTime(5000),
(map(
(result: boolean) => result === false ? { isUserIdFree: true } : null))
);
};
}
}
我的服务：
public isUserIdFree(userId: string): Observable<{} | boolean | HttpError> {
const updateUserCheck: UpdateUserCheck = new UpdateUserCheck();
updateUserCheck.userID = userId;
return this._httpClient.post<boolean>('UserManagementUser/IsUserIdFree', updateUserCheck));
}