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

Angular 6模板驱动形式的DOB验证

1 个答案: