FormGroup中使用（onBlur）事件在p日曆中使用（onBlur）事件

我正在更新P日曆模型值onblur事件，儘管formcontrol在模型更新後有效，但表單驗證將引發false。FormGroup中使用（onBlur）事件在p日曆中使用（onBlur）事件

HTML

<form (ngSubmit)="onSubmit()" [formGroup]="form" class="box-model form-support-margin"> 
    <div class="col-md-10 col-sm-12 col-xs-12"> 
    <p-calendar [(ngModel)]="tbDate" [dateFormat]="dateFormat" 
     [showIcon]="true" formControlName="tbDate" readonlyInput="false" 
     (onBlur)="tbDateChange($event)"> 
    </p-calendar>  
    </div> 
</form>

component.ts

import { Component, OnInit, EventEmitter, Pipe, ChangeDetectorRef, Input } from "@angular/core"; 
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; 
import * as moment from 'moment' 
import { Router } from '@angular/router'; 

@Component({ 
    templateUrl: "address.component.html", 
}) 

export class AddressComponent implements OnInit { 

    constructor( private fb: FormBuilder){} 

    ngOnInit() { 
    this.initFormGroup(); 
    } 

    initFormGroup() { 
    this.form = this.fb.group({ 
     tbDate: new FormControl(this.tbDate|| '', Validators.required); 
    }); 
    } 

    tbDateChange(event: any) { 
     let time = event.srcElement.value; 
     let d = new Date(); 
     this.tbDate=d; 
    }  
}

來源

2017-07-20 Vignesh

您同時使用ngModel和formControlName和IDK的什麼'tbDateChange'甚至在做，'this.date'是什麼？ – Chrillewoodz

是的，我使用ngModel和FormControlName。 tbDateChange事件用於在用戶按F11鍵時在OnBlur事件中分配當前日期。對不起this.date-> this.tbDate ngModel。 – Vignesh

您不能同時使用ngModel和formControlName。 – Chrillewoodz

p-calendar自動驗證，當它與斜槓 '/'，這使得形式有效過於輸入的日期。所以，我使用此功能來解決您的問題，讓用戶手動輸入日期。

在我的示例中，在用戶輸入月份和日期後，會自動添加'/'。我還添加了輸入驗證，以便只能輸入數字。

HTML：

<form (ngSubmit)="onSubmit()" [formGroup]="form" class="box-model form-support-margin"> 
    <div class="col-md-10 col-sm-12 col-xs-12"> 
    <p-calendar [dateFormat]="dateFormat" [(ngModel)]="modelVal" 
     [showIcon]="true" formControlName="tbDate" [readonlyInput]="false" 
     (keydown)="onlyNumbers($event)" 
     (keyup)="addSlash($event)"> 
    </p-calendar>  
    </div> 
    <p></p> 
    <button md-raised-button color="primary" type="submit" class="" [disabled]="!form.valid">Save</button> 
</form>

TS：

dateFormat: = "mm/dd/yy" 

    constructor( private fb: FormBuilder){} 

    ngOnInit() { 
    this.initFormGroup(); 
    } 

    initFormGroup() { 
    this.form = this.fb.group({ 
     tbDate: new FormControl(this.tbDate|| '', Validators.required); 
    }); 
    } 

    addSlash($event){ 
    if(event.code != "Backspace" && (event.srcElement.value.length == 2 || event.srcElement.value.length == 5)){ 
     event.srcElement.value += '/'; 
    } 
    } 

    onlyNumbers(event){ 
    if(event.code == "Backspace" 
     || event.code == "ArrowLeft" 
     || event.code == "ArrowRight"){ 
     return true; 
    } 
    if(event.srcElement.value.length < 10){ 
     if((event.keyCode >= 48 && event.keyCode <= 57) 
      || (event.keyCode >= 96 && event.keyCode <= 105)) 
      return true; 
     else 
     return false; 
    } 
    else 
     return false; 
    } 
}

Plunker demo

希望這種解決方法解決您的問題:)

來源

2017-07-20 17:03:12 Nehal

Thanks @ Nehal.This解決方法解決了問題。 – Vignesh

FormGroup中使用（onBlur）事件在p日曆中使用（onBlur）事件

回答

相關問題