How can I change date format for formGroups input element with Angular 7?

Question

When input is of type 'Date', date format is dd/MM/yyyy.
I want to change date format from MM/dd/yyyy to dd/MM/yyyy (Turkish Format and Turkish Calender).

Here is the code.

<form [formGroup]="opportunityForm" (ngSubmit)="updateData(opportunityForm.value)">
 <div class="form-group">
          <label>Oluşturulma Tarihi</label>
          <input  type="date"  class="form-control"  formControlName="createDate" required>
          <div class="alert-danger" *ngIf="!opportunityForm.controls['createDate'].valid && (opportunityForm.controls['createDate'].touched)">
            <div [hidden]="!opportunityForm.controls['createDate'].errors.required">
              Tarih alanı gerekli
            </div>
          </div>
        </div>
 <button type="submit" class="btn btn-primary" [disabled]="!opportunityForm.valid">Güncelle</button>
</form>



constructor(private http: HttpClient,private fb: FormBuilder,private router: Router,private actRoute: ActivatedRoute, private service:OpportunityService) {
    this.opportunityForm=this.fb.group({
      title:['',Validators.required],
      description:['',Validators.required],
      createDate:['',Validators.required],
      expirationDate:['',Validators.required],
      file: new FormControl(null)  
    });

Suggestions and solutions will be appreciated.

Answer 1

You can manipulate your formControl field 'createDate'.

Use DatePipe provided by angular to change date in any desired format.

Firstly,import DatePipe in your component's ts:

import { DatePipe } from '@angular/common';

Inject date pipe in providers array:

styleUrls: ['component.css'];
providers: [DatePipe] // like this you inject pipe,services

Declare in constructor :

 constructor(
    private datePipe: DatePipe
  ) { } 

You can either make a function which manipulate date; simply call in updateData(formValue) or directly manipulate date in updateData(formValue) method

// date manipulation using DatePipe

const datePipe = this.datePipe.transform(this.opportunityForm.get('createDate').value, 'dd-MM-yyyy')