Question

我有一个重要的日期选择器，它是由mysql数据库发送的值设置的。

该按钮始终处于禁用状态，不应启用该按钮，因为日期选择器已包含一个值。但是，当我使用日期选择器将值更改为另一个日期时，该按钮将启用。

Here is a stackblitz describing the issue.

这里是脚本（我使用日期的静态值从服务器模拟相同的日期）：

从服务器返回的值为2018-2-12 00:00:00，并在项目中的日期选择器中显示为2/12/2018，但在我的项目中却显示为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并修补至Form。代替设置值

从输入中删除值

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

从mysql服务器接收日期时，Angular 7和角度材料日期选择器将按钮设置为禁用

1 个答案: