首页 > 解决方案 > 在订阅中使用 ngbDatePicker 设置表单控件

问题描述

当我从 GET 请求中获取用户数据时,我需要使用 ngbDatePicker 设置表单控件,这是输入:

 <input
  type="text"
  [(ngModel)]="birthDate"
  [placement]="'bottom'"
  class="form-control"
  id="birthdate"
  [maxDate]="maxDate"
  placeholder="yyyy-mm-dd"
  name="birthdate"
  [minDate]="{ year: 1940, month: 1, day: 1 }"
  ngbDatepicker
  #d="ngbDatepicker"
  formControlName="birthdate"
  [ngClass]="{
  'is-invalid': !personalData.get('birthdate').valid && personalData.get('birthdate').touched
  }"
  (click)="d.toggle()"
/>

日期格式没问题,但是我猜这个值会重置状态,因为它在订阅函数中。表单组代码:

this.personalData = this.formBuilder.group({
  name: ['', Validators.required],
  lastName: ['', null],
  motherName: ['', Validators.required],
  secondLastName: ['', Validators.required],
  email: ['', [Validators.email, Validators.required]],
  phoneNumber: [null, [Validators.required, Validators.pattern(/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/)]],
  gender: ['male', Validators.required],
  birthdate: [null, Validators.required],
  ufBirth: [null, null],
  municipalityBirth: [null, null],
  nacionality: ['', Validators.required],
  originCountry: [null, null],
  inmigrationDate: ['', null],
  breed: [null, Validators.required],
  education: [null, null],
  familySituation: [null, null],
  cep: ['', Validators.required],
  uf: [null, Validators.required],
  city: [null, Validators.required],
  neighborhood: ['', Validators.required],
  street: ['', Validators.required],
  streetNumber: [null, [Validators.required, Validators.pattern(/^(?=.*[0-9])/)]],
});

birthDate: NgbDateStruct;

this.birthDate = {
      year: moment(user.personalData.birthdate).year(),
      month: moment(user.personalData.birthdate).month(),
      day: moment(user.personalData.birthdate).day(),
    };
    this.personalData.get('birthdate').setValue({
      year: moment(user.personalData.birthdate).year(),
      month: moment(user.personalData.birthdate).month(),
      day: moment(user.personalData.birthdate).day(),
    });

我尝试了几次以将值设置为正常工作,我的意思是 1. 格式化值,2. 设置值和 3. 应用表单验证。

标签: javascriptangularformsng-bootstrap

解决方案


推荐阅读