时间戳

首页 > 解决方案 > 角度材料日期选择器返回空值

angular - 角度材料日期选择器返回空值

问题描述

我使用了 Angular Material & Reactive Forms。首先，我正在获取系统日期并显示它。但是当我单击提交时，它会给出空值。以下是 HTML 和 TS 部分。

<form [formGroup]="atAdminName" (ngSubmit)="onFormSubmit()">
    <div class="row">
      <div class="col-md-6">
        <label style="font-size: 18px">
          From : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </label>
        <mat-form-field>
            <input matInput [matDatepicker]="picker1" formControlName="date1" [formControl]="date" style="font-size:18px">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        <br>
      </div>

    </div>
    <div class="text-center">
      <button type="submit" class="btn btn-primary">Show Report</button>
      &nbsp;&nbsp;&nbsp;
      <button type="button" class="btn btn-default waves-effect">Reset</button>
    </div>
 </form>

下面是TS

export class AdminNameComponent implements OnInit {

  atAdminName = new FormGroup({
    date1: new FormControl()
  });

  get date1() { return this.atAdminName.get('date1'); }

  date = new FormControl(new Date());
  serializedDate = new FormControl((new Date()).toISOString());

  constructor(private fb: FormBuilder, public usr?: UserService) {
    this.atAdminName = this.fb.group({
      date1: new FormControl('', Validators.required),
    })
  }

  onFormSubmit() {
    const userid = this.usr.getUserId();
    console.log(this.atAdminName.value);
  }

}

标签： angularangular-material

解决方案

你可以试试这个解决方案

我在stackblitz上创建了一个演示

安装时刻 -npm install moment --save

import moment from 'moment';

ts文件代码

atAdminName: FormGroup;

constructor(private fb: FormBuilder) {
    this.atAdminName = this.fb.group({
        date1: new FormControl(new Date(), Validators.required),
    })
}

onFormSubmit() {
    let newdateValue = moment(this.atAdminName.get('date1').value).format("DD-MM-YYYY");
    this.atAdminName.get('date1').setValue(newdateValue);
    console.log(this.atAdminName.value);
}
/**
* This method is change date format.
*/
dateFormat(date, controlType: string) {
    this.atAdminName.get(controlType).setValue(moment(date).format("DD-MM-YYYY"));
}

html文件代码

<form [formGroup]="atAdminName" (ngSubmit)="onFormSubmit()">
    <div class="row">
      <div class="col-md-6">
        <label style="font-size: 18px">
          From : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </label>
        <mat-form-field>
            <input (dateChange)="dateFormat($event.value,'date1')" matInput [matDatepicker]="picker1" formControlName="date1" style="font-size:18px">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        <br>
      </div>

    </div>
    <div class="text-center">
      <button type="submit" class="btn btn-primary">Show Report</button>
      &nbsp;&nbsp;&nbsp;
      <button type="button" class="btn btn-default waves-effect">Reset</button>
    </div>
 </form>

推荐阅读