Angular Material Date Picker returns null value

Question

I have used Angular Material & Reactive Forms. First I am taking the system date & showing it. But when I click submit it gives null value. Below are both 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>

And below is 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);
  }

}

Krishna Rathore · Accepted Answer · 2018-06-27 08:56:33Z

You can try this solution

I have create a demo on stackblitz

Install moment - npm install moment --save

import moment from 'moment';

ts file code

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 file code

<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>

Bro but it is giving me this output - Wed Jun 27 2018 12:48:34 GMT+0530. I need this - 27-06-2018.
Bro can u implement the same on stackblitz & send me the link I am facing issues in the above code to implement.
its done brother. I just used the datePipe to solve it - const tdate = this.datepipe.transform(this.tdate, 'yyyy-dd-MM');

Collectives™ on Stack Overflow

Angular Material Date Picker returns null value

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related