Question

尝试在角度用户注册中实现Birthday： Custom Birthday picker

所以，我使用三个字段（日，月，年）。我想仅在日期字段具有与月份相关的有效值时插入（例如：28/2月而不是31/2月）。我怎么能用角度打字稿呢？

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

Ps。：我没有使用原生的日期选择器，因为生日那天不太好用，有点难用。

非常感谢。

代码：

＆＃13;

<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>

＆＃13;

Answer 1

这里是验证码。谢谢！

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

Answer 2

有一个名为momentjs的库，可用于执行您希望执行的日期验证。看看他们的打字稿文档，非常简单。

npm install moment

打字稿文件中的

import * as moment from 'moment';

现在，

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

date.isValid（）告诉您日期是否有效。

Angular4 - 打字稿 - 生日验证（日，月，年）

2 个答案: