Угловой 7 и угловой материал выбора даты отключает кнопку при получении даты с сервера MySQL

Question

У меня есть средство выбора даты материала, где оно устанавливается значением, отправленным из базы данных mysql.

Кнопка всегда отключена, чего не должно быть, поскольку средство выбора даты уже содержит значение.Но когда я изменяю значение на другую дату с помощью средства выбора даты, кнопка включается.

Здесь приведен фрагмент стека, описывающий проблему.

А вот сценарии (где я использую статическое значение даты для имитации того же значения с сервера):

Значение, возвращаемое с сервера, равно 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}}

Машинопись:

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быть доступным для чтения средством выбора даты материала и активировать кнопку сохранения?

Answer 1

Конвертируйте свою дату в javascript date obj, как это, и исправьте To Form.Вместо значения настройки

Удалить значение со входа

ngOnInit()
{
   this.formGroup.get('date_added').patchValue(new Date('2/14/2018'));
  // this.dateFormat = '2/14/2018';
}