相关疑难解决方法(0)

密码和确认密码字段验证angular2反应形式

我需要使用反应式表格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)

angular2-forms angular

19
推荐指数
2
解决办法
3万
查看次数

角度材料mat-error无法显示消息

我有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

javascript typescript angular-material angular

8
推荐指数
1
解决办法
1万
查看次数

使用反应形式以角度验证密码和确认密码

我在下面附上了我的代码。我在添加密码不匹配验证时遇到问题。如果我输入不匹配的密码,我不会收到验证错误

注册.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)

javascript validation angular angular-reactive-forms

5
推荐指数
2
解决办法
2万
查看次数

如何将表单组控件值传递给在同一表单组中使用的自定义验证器?

我有一个自定义验证器来检查重新输入确认

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 …

angular

5
推荐指数
1
解决办法
1749
查看次数

角度反应形式根据其他两个输入验证输入

我有三个输入字段,即

  1. 最低分数
  2. 最高分
  3. 原产地于

因此,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)

在此输入图像描述

如何正确验证来源输入字段?

编辑:

注意 -fbFormBuilder

我的整个表格

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)

angular-material angular angular-reactive-forms

1
推荐指数
1
解决办法
4266
查看次数