angular - Angular 6 模板驱动表单中的 DOB 验证
问题描述
我正在尝试创建一个 DOB 字段,该字段需要具有 {{currentdate}} 的最大值,我的方法是在 TS 文件中获取当前日期并在 HMTL 'max' 验证器中使用字符串插值,但使用这个
date: Date = new Date();
返回 2018 年 6 月 28 日星期四 12:11:34 GMT+0530 (IST)
有没有我可以通过格式化返回的日期以匹配验证器的预期输入来完成这项工作?
编辑 这里是html:
<div class="row">
<div class="col-xs-12">
<h1>{{date}}</h1>
<form (ngSubmit)="onSignUp(f)" #f="ngForm" >
<div class="form-group">
<label for="firstName">First Name</label>
<input
ngModel
required
type="text" name="firstName" id="fname">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input
ngModel
required
type="text" name="lastName" id="lastName">
</div>
<div class="form-group">
<label for="email">Email</label>
<input
ngModel
required
type="email" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input
ngModel
required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
type="password" name="password" id="password">
</div>
<div class="form-group">
<label for="verifyPassword">Confirm Password</label>
<input
ngModel
type="verifyPassword" name="verifyPassword" id="verifyPassword">
</div>
<div class="form-group">
<label for="birthdate">Birthdate</label>
<input
max="2017-04-01"
type="date" name="birthdate" id="birthdate">
</div>
<div class="form-group">
<label for="flatPurchaceDate">Flat Purchace Date</label>
<input
max="2017-04-01"
type="date" name="flatPurchaceDate" id="flatPurchaceDate">
</div>
<div class="form-group">
<label for="proficePicture">Profile Picture (URL)</label>
<input type="text" name="profilePicture" id="profilePicture" placeholder="URL">
</div>
<div class="form-group">
<label for="flatBlock">Flat Block</label>
<select id="flatBlock" name="flatBlock">
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
<div class="form-group">
<label for="flatNumber">Flat Number</label>
<input
min="1" max="10"
type="number" name="flatNumber" id="flatNumber" placeholder="URL">
</div>
<div class="form-group">
<label for="mobileNumber">Mobile Number</label>
<input
pattern="[1-9]{1}[0-9]{11}"
type="tel" name="mobileNumber" id="mobileNumber">
</div>
<div class="form-group">
<label for="subscribeNews">Terms and Conditions</label>
<input
required
type="checkbox" #terms id="terms" name="terms">
</div>
<button [disabled]="!f.valid" class="btn btn-primary btn-sm">Sign Up</button>
</form>
</div>
</div>
和 TS:
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NgForm, FormsModule } from '@angular/forms';
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
@ViewChild('terms') terms: ElementRef ;
constructor() { }
date: Date = new Date();
ngOnInit() {
}
valid = this.terms.nativeElement.checked;
onSignUp(form: NgForm) {
console.log(this.terms);
console.log(this.terms.nativeElement.checked);
}
}
忽略关于复选框的部分,这是另一个验证
解决方案
在 HTML 中
<h1>{{date}}</h1>
<form (ngSubmit)="onSignUp(f)" #f="ngForm">
<div class="form-group">
<label for="firstName">First Name</label>
<input ngModel required type="text" name="firstName" id="fname">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input ngModel required type="text" name="lastName" id="lastName">
</div>
<div class="form-group">
<label for="email">Email</label>
<input ngModel required type="email" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input ngModel required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" type="password" name="password" id="password">
</div>
<div class="form-group">
<label for="verifyPassword">Confirm Password</label>
<input ngModel type="verifyPassword" name="verifyPassword" id="verifyPassword">
</div>
<div class="form-group">
<label for="birthdate">Birthdate</label> {{maxDate}}
<input [max]="maxDate" (change)="dateChange($event.target.value)" type="date" name="birthdate" id="birthdate">
</div>
<div class="form-group">
<label for="flatPurchaceDate">Flat Purchace Date</label>
<input max="2017-04-01" type="date" name="flatPurchaceDate" id="flatPurchaceDate">
</div>
<div class="form-group">
<label for="proficePicture">Profile Picture (URL)</label>
<input type="text" name="profilePicture" id="profilePicture" placeholder="URL">
</div>
<div class="form-group">
<label for="flatBlock">Flat Block</label>
<select id="flatBlock" name="flatBlock">
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
<div class="form-group">
<label for="flatNumber">Flat Number</label>
<input min="1" max="10" type="number" name="flatNumber" id="flatNumber" placeholder="URL">
</div>
<div class="form-group">
<label for="mobileNumber">Mobile Number</label>
<input pattern="[1-9]{1}[0-9]{11}" type="tel" name="mobileNumber" id="mobileNumber">
</div>
<div class="form-group">
<label for="subscribeNews">Terms and Conditions</label>
<input required type="checkbox" name="terms">
</div>
<button class="btn btn-primary btn-sm">Sign Up</button>
</form>
</div>
</div>
在 ts 中:
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NgForm, FormsModule } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
date = new Date();
maxDate = (new Date().getFullYear()).toString()+"-0"+(new Date().getMonth()+1).toString()+"-"+(new Date().getDate()).toString();
constructor() {
console.log(this.maxDate)
}
onSignUp(form: NgForm) {
console.log(form.value);
}
dateChange(event){
console.log(event);
}
}
推荐阅读
- java - EqualsIngnoreCase 的过滤谓词
- javascript - dragscroll.js 阻止显示工具提示?
- excel - 我正在尝试创建一个从单元格填充组合框选项的用户表单。我怎么能只从单元格范围中提取唯一值?
- esp32 - 运行在 240MHz 的 esp32 似乎有一个 160MHz 的时钟。哪个是真相?
- c++ - 从朋友类的朋友功能访问私人成员
- javascript - 无论屏幕大小如何 javasript 如何获取鼠标位置
- unity3d - 有没有办法使用 Photon Pun2 或 Photon Chat 发送或接收图像、音频和视频?
- tensorflow - Tensorflow 2 中的字符串比较:不允许使用 `tf.Tensor` 作为 Python `bool`:AutoGraph 确实转换了此函数
- r - svd(x, nu = 0, nv = k) 中的错误:“x”中的值无限或缺失。矩阵中没有 NA 或 Inf 值
- javascript - MiniCssExtractPlugin 的 linkType 和 html-webpack-link-type-plugin 都不起作用