как установить формат даты в средстве выбора даты мата в angular

Question

У меня была форма, которая состоит из элемента управления формы в качестве средства выбора даты с средством выбора даты мат. когда я выбираю дату с помощью пикета даты, элемент управления формы принимает класс даты. Мне нужно преобразовать его в строку. Пожалуйста, помогите мне в этом html-коде:

<mat-form-field appearance="fill">
                <input matInput [matDatepicker]="picker" formControlName="date" placeholder="Choose a date">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>

Когда я выбираю дату, она должна преобразоваться в 11-05-2020(дд-мм-гггг) для элемента управления формы при отправке. Пожалуйста, помогите мне

Редактировать:

 import { Component, OnInit } from '@angular/core';
    import { ProductsService } from '../products/products.service';
    import { forkJoin } from 'rxjs';
    import { FormControl, Validators, FormBuilder, FormArray } from '@angular/forms';
    import { Router } from '@angular/router';
    import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

    @Component({
      selector: 'app-orders',
      templateUrl: './orders.component.html',
      styleUrls: ['./orders.component.scss'],
      providers: [ProductsService, {provide: MAT_DATE_LOCALE, useValue: 'en-GB'}]
    })
    export class OrdersComponent implements OnInit {
       paginationPageSize:any;
       getRowHeight:any;
    statusList=['open','closed'];
    form = this.fb.group({

      city: new FormControl('', Validators.required),
      date: new FormControl('', Validators.required),
      status: new FormControl('', Validators.required),
      pageNum:0,
      pageSize:10,
      preOrders: new FormControl(false, Validators.required),
     });
     constructor(private productsService: ProductsService, private fb: FormBuilder, private router: Router) { }

      ngOnInit() {
      }

      onSubmit() {
        if (this.form.valid) {
          const value = this.form.value;
        }
    }


    }

Я добавил в провайдера, но он все еще не работает.

Answer 1

Вы можете изменить формат даты с помощью локали интернационализации

Установите языковой стандарт в своем компоненте TS...

@Component({
  selector: ...,
  templateUrl: ...,
  styleUrls: ...,
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
  ],
  ...
})
export class Component ...

Если вы хотите изменить его глобально, установите Locale в своем app.module.ts

@NgModule({
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
  ],
})
export class AppModule {}

Ссылка: https://material.angular.io/components/datepicker/overview

Надеюсь, это поможет!