Angular 角度材质日期选择器返回空值

我使用了角材料和反应形式。首先，我获取系统日期并显示它。但当我单击submit时，它会给出空值。下面是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>

---

你可以试试这个解决方案

我已经在上创建了一个演示

安装时刻-

npm安装时刻--保存

从“时刻”导入时刻

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

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>


发件人：


展示报告
重置
Bro但它给了我这个输出-2018年6月27日星期三12:48:34 GMT+0530。我需要这个-27-06-2018。兄弟你能在stackblitz上实现同样的功能吗？给我发送我在上述代码中遇到的问题的链接，以实现。兄弟完成了。我只是使用datePipe来解决它-const tdate=this.datePipe.transform（this.tdate，'yyyy-dd-MM'）；
<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>