Выбор даты углового материала возвращает нулевое значение

Question

Я использовал угловой материал и реактивные формы. Сначала я беру системную дату и показываю ее. Но когда я нажимаю «Отправить», он дает нулевое значение. Ниже приведены HTML и TS Part.

<form [formGroup]="atAdminName" (ngSubmit)="onFormSubmit()">
    <div class="row">
      <div class="col-md-6">
        <label style="font-size: 18px">
          From : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </label>
        <mat-form-field>
            <input matInput [matDatepicker]="picker1" formControlName="date1" [formControl]="date" style="font-size:18px">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        <br>
      </div>

    </div>
    <div class="text-center">
      <button type="submit" class="btn btn-primary">Show Report</button>
      &nbsp;&nbsp;&nbsp;
      <button type="button" class="btn btn-default waves-effect">Reset</button>
    </div>
 </form>

И ниже TS

export class AdminNameComponent implements OnInit {

  atAdminName = new FormGroup({
    date1: new FormControl()
  });

  get date1() { return this.atAdminName.get('date1'); }

  date = new FormControl(new Date());
  serializedDate = new FormControl((new Date()).toISOString());

  constructor(private fb: FormBuilder, public usr?: UserService) {
    this.atAdminName = this.fb.group({
      date1: new FormControl('', Validators.required),
    })
  }

  onFormSubmit() {
    const userid = this.usr.getUserId();
    console.log(this.atAdminName.value);
  }

}

Answer 1

Пожалуйста, удалите: [formControl] = "date"

     atAdminName : FormGroup;

        constructor(private fb: FormBuilder) {
        this.atAdminName = this.fb.group({
             date1: new FormControl(new Date(), Validators.required),
                  })
            }

     onFormSubmit() {
           let updatedDate = 
           moment(this.atAdminName.get('date1').value).format("DD-MM- 
 YYYY");
          this.atAdminName.get('date1').setValue(updatedDate);
          console.log(this.atAdminName.value);
    }

Answer 2

Вы можете попробовать это решение

Я создал демо на stackblitz

Момент установки - npm install moment --save

import moment from 'moment';

код файла ts

atAdminName: FormGroup;

constructor(private fb: FormBuilder) {
    this.atAdminName = this.fb.group({
        date1: new FormControl(new Date(), Validators.required),
    })
}

onFormSubmit() {
    let newdateValue = moment(this.atAdminName.get('date1').value).format("DD-MM-YYYY");
    this.atAdminName.get('date1').setValue(newdateValue);
    console.log(this.atAdminName.value);
}
/**
* This method is change date format.
*/
dateFormat(date, controlType: string) {
    this.atAdminName.get(controlType).setValue(moment(date).format("DD-MM-YYYY"));
}

html код файла

<form [formGroup]="atAdminName" (ngSubmit)="onFormSubmit()">
    <div class="row">
      <div class="col-md-6">
        <label style="font-size: 18px">
          From : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </label>
        <mat-form-field>
            <input (dateChange)="dateFormat($event.value,'date1')" matInput [matDatepicker]="picker1" formControlName="date1" style="font-size:18px">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        <br>
      </div>

    </div>
    <div class="text-center">
      <button type="submit" class="btn btn-primary">Show Report</button>
      &nbsp;&nbsp;&nbsp;
      <button type="button" class="btn btn-default waves-effect">Reset</button>
    </div>
 </form>