【问题标题】:Angular2 text-mask addons (createAutoCorrectedDatePipe used for Date of Birth)Angular2 文本掩码插件(createAutoCorrectedDatePipe 用于出生日期)
【发布时间】:2018-01-18 04:12:51
【问题描述】:

我使用了文本掩码和文本掩码插件,并将其用于出生日期,当我们输入时它不检查有效日期,它也接受未来的日期..请任何人帮助我.. 我的 ts 文件,

 import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe';

export class HomeComponent {
   autoCorrectedDatePipe: any = createAutoCorrectedDatePipe('mm/dd/yyyy');
   mask: any = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
}

我的模板,

 <input [maxlength]="20" [textMask]="{mask: mask, keepCharPositions: true, pipe: autoCorrectedDatePipe}" [(ngModel)]="myModel" type="text" [formControl]="form.controls['dob']" name="dob" class="form-control">

【问题讨论】:

    标签: angular angular2-forms angular2-directives


    【解决方案1】:

    掩码仅用于写入掩码值。要测试值是否有效,您应该使用验证器:https://angular.io/guide/form-validation

    【讨论】:

      【解决方案2】:

      你可以通过响应式表单验证来做到这一点

      在ts文件中:

       this.ocapForm = this.formBuilder.group({
              dob: ['', Validators.required]
          });
      

      在html中

       <div class="col-md-6 text-left pl-0">
         <input type="text" formControlName="dob" class="form__input--text">
       </div>
      

      你也可以编写自己的验证

      在ts中

      withdrawalDate: ['', validateDate]
      

      在您在验证中调用的函数中

      public validateDate(control: FormControl){
          const dob = control.value; // to geth the value of name
          const requiredValidation = Validators.required(control); // you can do inbuild validation here aswell
          if (!!requiredValidation) {  // to check validation
              return requiredValidation; // return the error as you needed
          } else if (dob) {     // making your custom check here
              return { dobError: true };
          }
          return null;
      

      }

      【讨论】:

        猜你喜欢
        • 2017-08-25
        • 1970-01-01
        • 2012-12-23
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-09-25
        • 1970-01-01
        相关资源
        最近更新 更多