我需要使用反应式表格angular2来检查密码和确认密码字段是否具有相同的值.我确实在这里看到了很多答案,Angular 2表格验证了重复密码,比较验证器中的字段和angular2,但似乎没有人对我有用.有人请帮忙."这个"在我的验证函数中是未定义的: (.分享我的代码,
this.addEditUserForm = this.builder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
title: ['', Validators.required],
email: ['', Validators.required],
password: ['', Validators.required],
confirmPass: ['', [Validators.required, this.validatePasswordConfirmation]]
});
validatePasswordConfirmation(group: FormGroup): any{
let valid = true;
// if (this.addEditUserForm.controls.password != this.addEditUserForm.controls.confirmPass) {
// valid = false;
// this.addEditUserForm.controls.confirmPass.setErrors({validatePasswordConfirmation: true});
// }
return valid;
}
Run Code Online (Sandbox Code Playgroud) 我有2个日期时间选择器,endDate不能小于startDate
endDateAfterOrEqualValidator(formGroup): any {
var startDateTimestamp: number;
var endDateTimestamp: number;
startDateTimestamp = Date.parse(formGroup.controls['startDateForm'].value);
endDateTimestamp = Date.parse(formGroup.controls['endDateForm'].value);
return (endDateTimestamp < startDateTimestamp) ? { endDateLessThanStartDate: true } : null;
}
Run Code Online (Sandbox Code Playgroud)
在HTML中:
<mat-form-field>
<input matInput name="endDate" id="endDate" formControlName="endDateForm" [(ngModel)]="endDate" [matDatepicker]="toDatePicker"
placeholder="To Date">
<mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
<mat-datepicker disabled="false" #toDatePicker></mat-datepicker>
<mat-error *ngIf="trainingDetail.hasError('endDateLessThanStartDate')">Not valid<mat-error>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)
如果出现"mat-error",则不显示该消息.我尝试改变"小"
<small *ngIf="trainingDetail.hasError('endDateLessThanStartDate')">Not valid</small>
Run Code Online (Sandbox Code Playgroud)
信息很好.请告诉我如何使用mat-error
我在下面附上了我的代码。我在添加密码不匹配验证时遇到问题。如果我输入不匹配的密码,我不会收到验证错误
注册.component.html
<div class="form-group row mt-3">
<label class="col-md-4 col-lg-4 text-center">UserName:<span style="color:red">*</span></label>
<input kendoTextBox required type="text" class=" col-md-6 col-lg-6 form-control " placeholder="Enter Your UserName " formControlName="username"/>
<div *ngIf="(submitted||f2.username.touched) && f2.username.invalid" class="error-msg">
<div *ngIf="f2.username.errors.required">UserName is required</div>
</div> </div>
<div class="form-group row">
<label class="col-md-4 col-lg-4 text-center">Password:<span style="color:red">*</span></label>
<input kendoTextBox type="password" required class=" col-md-6 col-lg-6 form-control " placeholder="Enter Your passowrd " formControlName="password"/>
<div *ngIf="(submitted||f2.password.touched) && f2.password.invalid" class="error-msg">
<div *ngIf="f2.password.errors.required">password is required</div>
<div *ngIf="f2.password.errors.minlength">minimum of 6 characters required</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-4 …Run Code Online (Sandbox Code Playgroud) 我有一个自定义验证器来检查重新输入确认
import { AbstractControl } from '@angular/forms';
export function RetypeConfirm(confirmpassword: string) {
return (control: AbstractControl): { [key: string]: boolean } | null => {
if (control.value !== confirmpassword) {
return { 'mismatch': true };
}
return null;
};
}
Run Code Online (Sandbox Code Playgroud)
我的打字稿文件
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { RetypeConfirm } from 'app/validators/retype-confirm.validator';
passwordChangeForm: FormGroup;
constructor(private fb: FormBuilder){
this.passwordChangeForm = this.fb.group({
newPassword: ["", [Validators.required, Validators.pattern(RegEx.STRONG_PASSWORD)]],
confirmpassword: ["", [Validators.required, RetypeConfirm(***I want to pass passwordChangeForm.controls['newPassword'].value here**** )]]
});
}
Run Code Online (Sandbox Code Playgroud)
我需要传递this.passwordChangeForm.controls['newPassword'].value …
我有三个输入字段,即
因此,origin at值必须介于最低分数和最高分数之间。
我的表格看起来像这样
this.fb.group({
min: ['', [Validators.required]],
max: ['', [Validators.required]],
origin: ['', [Validators.required, Validators.min(?), Validators.max(?)]] # I need value of min and max input field value here
})
Run Code Online (Sandbox Code Playgroud)
如何正确验证来源输入字段?
编辑:
注意 -fb是FormBuilder
我的整个表格
this.scalesForm = this.fb.group({
scales: this.fb.array([
this.fb.group({
type: ['x', [Validators.required]],
name: ['', [Validators.required]],
components: this.fb.array([], [Validators.required]),
min: ['', [Validators.required]],
max: ['', [Validators.required]],
origin: ['', [Validators.required]]
}),
this.fb.group({
type: ['y', [Validators.required]],
name: ['', [Validators.required]],
components: this.fb.array([], [Validators.required]),
min: ['', [Validators.required]], …Run Code Online (Sandbox Code Playgroud)