angular - Angular 6 模板驱动表单中的 DOB 验证

Question

我正在尝试创建一个 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);
  }
}

忽略关于复选框的部分，那是另一个验证

Answer 1

Here is your solution

在 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);
  }
}