Question

是否可以将输入字段中的日期格式设置为＆＃34; mm / dd / yyyy＆＃34;，使用显示的输入进行验证，但将模型格式化为＆＃34; yy-mm -dddd＆＃34;以模板驱动的形式？

在此表单中，用户键入根据正则表达式模式验证的日期。 A＆＃39; /＆＃39;在用户输入时添加，以达到我想要的格式。

<label>Date available:
    <input type="text" name="dateAvailable" ngModel #date 
        (input)="date.value = FormatDateForView(date.value)" <!-- automatically inserts '/'s as the user types -->
        pattern="^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d$">
    (blur)="applicant.dateAvailable = FormatDateForMySql(date.value)" <!-- sets the model, replacing '/' with '-' -->
</label>
    <div *ngIf="date.errors.pattern">*Date must be in mm/dd/yyyy format.</div>

这不起作用。如果我更改它以使ngModel #date读取ngModel #date="ngModel"，则验证有效，但(input)事件逻辑不再有效。

我试图在没有第二个模型且没有重新格式化逻辑的情况下执行此操作onSubmit()

有什么想法吗？

Answer 1

您需要使用2 way data binding而不是绑定到(input)事件。

<input 
   type="text" 
   name="dateAvailable" 
   [(ngModel)]="FormatDateForView($event)"
   pattern="^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d$"
   (blur)="applicant.dateAvailable = FormatDateForMySql(date.value)" 
/>

另请注意，替换data.value这是因为......

$ event是发出事件的有效负载。换句话说，ngModelChange负责从内部target.value有效负载中提取$event，并简单地发出（在技术上正确，它实际上是DefaultValueAccessor提取该值并写入底层DOM对象）。 Reference.

在这种情况下，ngModelChange包含在[(ngModel)]的双向绑定中。当你写[(ngModel)]时，你实际上在写：

[ngModel]="..." 
(ngModelChange)="..."

Angular：可以使用一种格式的模型，但显示＆amp;在另一个验证？

1 个答案: