Angular 7 和 angular material 日期选择器在从 mysql 服务器接收日期时将按钮设置为禁用

Question

我有一个 material 日期选择器，它由从 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}}

打字稿：

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 服务器的日期转换为可由 material 日期选择器读取并启用保存按钮？

Answer 1

像这样将您的日期转换为 javascript 日期对象并修补为 Form。而不是设置值

从输入中删除值

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

Angular 7 和 angular material 日期选择器在从 mysql 服务器接收日期时将按钮设置为禁用

Angular 7 and angular material date picker is setting the button to disabled when receiving a date from mysql server

datepicker

angular

angular-reactive-forms

angular7