Angular4 - Typescript - 生日验证（日、月、年）答案

【问题标题】：Angular4 - Typescript - Birthday Validation (Day, Month, Year)Angular4 - Typescript - 生日验证（日、月、年）
【发布时间】：2018-11-10 12:25:20
【问题描述】：

尝试在角度用户寄存器中实现生日： Custom Birthday picker

所以，我使用三个字段（日、月、年）。我只想在日期字段具有与月份相关的有效值时插入（例如：28/2 月而不是 31/2 月）。我怎样才能在角度打字稿中做到这一点？

另外，将生日存储在数据库中，三列还是一列连接最好？

Ps.：我没有使用本地日期选择器，因为生日它不是很好而且有点难以使用。

非常感谢。

代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form [formGroup]="formulario" (ngSubmit)="cadastraPessoa()" ngNativeValidate>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Nome completo" formControlName="nomecompleto" required>
  </div>
  <div class="form-group">
    <input type="email" class="form-control" placeholder="E-mail" formControlName="email" required>
  </div>

  <div class="form-group">
    <input type="text" class="form-control" placeholder="Nome de usuário" formControlName="nomeusuario" required>
  </div>


  <div>
    <label>Data de Nascimento</label>
    <div class="container-fluid">
      <div class="form-group col-xs-4 col-md-4" style="margin-right: 0px; padding-right:1px;">
        <input style="margin-right: 0px;" type="text" minlength="2" maxlength="2" class="form-control" placeholder="Dia" formControlName="dianasc" required>
      </div>
      <div class="form-group col-xs-4 col-md-4" style="margin: 0px;">
        <select name="mesnasc" formControlName="mesnasc" style="margin-right: 0px;" class="form-control" placeholder="Mês" required>
              <option selected="selected" disabled="disabled">Mês</option>
              <option value="1">Janeiro</option>
              <option value="2">Fevereiro</option>
              <option value="3">Março</option>
              <option value="4">Abril</option>
              <option value="5">Maio</option>
              <option value="6">Junho</option>
              <option value="7">Julho</option>
              <option value="8">Agosto</option>
              <option value="9">Setembro</option>
              <option value="10">Outubro</option>
              <option value="11">Novembro</option>
              <option value="12">Dezembro</option>
            </select>
      </div>
      <div class="form-group col-xs-4 col-md-4" style="margin: 0px; padding-left:1px;">
        <input style="margin-right: 0px;" type="text" aria-invalid minlength="4" maxlength="4" class="form-control" placeholder="Ano" formControlName="anonasc" required>
      </div>
    </div>
  </div>

  <div class="form-group">
    <input type="password" id="senha" class="form-control" name="senha" placeholder="Senha" formControlName="senha" [formGroup]="formulario">


  </div>
  <div class="form-group">
    <input type="password" class="form-control" id="confsenha" name="confsenha" placeholder="Confirmação de Senha" formControlName="confsenha" [formGroup]="formulario">
    <small *ngIf="!formulario.controls.confsenha.valid || !formulario.controls.confsenha.dirty || (formulario.controls.confsenha.pristine && !formulario.submitted)" class="text-danger">
          Password mismatch
        </small>

  </div>




  <button type="submit" id="submit" [ngClass]="{disabled : !isValid}" [disabled]="!isValid" class="btn btn-primary btn-sm btn-block">Cadastrar</button>
  <app-alert></app-alert>
</form>

【问题讨论】：

请在帖子中添加代码
请将代码添加到帖子中。

标签： angular typescript

【解决方案1】：

有一个名为momentjs 的库可用于执行您想要执行的日期验证。看看他们的 typescript 文档，很简单。

npm install moment

在打字稿文件中

import * as moment from 'moment';

现在，

var date = moment("2016-10-19");

date.isValid() 告诉你日期是否有效。

【讨论】：

我最终使用了这种方式，先生。非常感谢！巨大的帮助！ (const datanasc = moment('2018-01-15', 'YYYY-MM-DD', true);
@DValdirMartins - 谢谢。如果您认为此答案对您有所帮助，请接受它作为答案。
@DValdirMartins 你能提供你对这个问题的完整解决方案吗？我在生日表单验证方面遇到了同样的问题。提前致谢！
@Artyom，我发布了验证码。它以这种方式对我有用。您可以将它放在 *.directive.ts 文件（指令）中，或者插入到组件本身的 *.ts 文件中。

【解决方案2】：

这里是验证码。谢谢！

static ValidDate(AC: AbstractControl) {

const birthday = AC.get('birthday').value; // to get value in input tag
const birthMonth = AC.get('birthMonth').value; // to get value in input tag
const birthYear = AC.get('birthYear').value; // to get value in input tag
const fullDate = birthYear + '-' + birthMonth + '-' + birthday;

const fullDate = moment(concatDate,       'YYYY-MM-DD', true);
 moment.locale('pt-BR');

if ( birthday !== '' && birthMonth !== '' && birthYear !== '' ) {

  if (fullDate.isValid() ) {
    AC.get('birthday').setErrors( null);
    return null;
  } else {
    AC.get('birthday').setErrors( {invalidDate: true} );
  }
}
}

【讨论】：