Angular 7和Angular Material日期选择器在从MySQL Server接收日期时将按钮设置为禁用。

我有一个材料日期选择器,它是由一个从MySQL数据库发送的值设置的。

该按钮始终处于禁用状态,因为日期选取器已包含值,因此不应禁用该按钮。但是,当我使用日期选择器将值更改为其他日期时,按钮被启用。

Here is a stackblitz describing the issue.

这里是脚本(在这里,我使用日期的静态值来模拟来自服务器的相同值):

从服务器返回的值为 2018-2-12 00:00:00 在日期选择器中显示 2/12/2018 在我的项目上,但在StackBlitz上显示为 2/12/2018 00:00:00 .

HTML脚本:

<form [formGroup]="formGroup">
    <mat-card>
        <mat-card-content>
            <h2 class="example-h2">Datepicker</h2>
            <mat-form-field color="warn" appearance="outline">
                <input matInput id="date_added" [max]="maxDate" [matDatepicker]="picker" [value]="dateFormat"
                  formControlName="date_added" placeholder="Date Added">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
              </mat-form-field>&nbsp;
  </mat-card-content>
</mat-card>
 <button mat-raised-button color="warn" (click)="updateHouseholdData()" [disabled]="!formGroup.valid">
            <mat-icon>update</mat-icon>Update
          </button> 
</form>
{{formGroup.controls.date_added.errors | json}}
<br>
{{formGroup.controls.date_added.value | json}}

Typescript:

export class AppComponent { 
  formGroup: FormGroup;
  dateFormat;
  constructor(private fb: FormBuilder)
  {
    this.formGroup = this.fb.group({
      'date_added': new FormControl('', Validators.required)
    })
  }
  ngOnInit()
  {
    this.dateFormat = '2/14/2018 00:00:00';
  }
}

如何将来自MySQL服务器的日期转换为材料日期选择器可读的日期,并启用“保存”按钮?