[SOLVED] onReset removes the default value of date

Issue

On page load the date in the date input field is set to the current date. But when the form is reset, the default date is not restored instead the date field is cleared as shown in the figure

  1. on page load
  2. on resetting the form

// app.component.ts

export class AppComponent implements OnInit {
  currentDate: {};
  taskForm: FormGroup;
  taskArr: ITaskDetails[] = [];
  taskObj: ITaskDetails = {
    title: '',
    description: '',
    date: null
  };

  constructor(private taskSer: TaskService, private fb: FormBuilder) {
    this.currentDate = new Date().toISOString().substring(0, 10);
  }

  reset() {
    this.taskForm.reset();
  }
  ngOnInit() {
    // this.taskForm = new FormGroup({
    //   'taskTitle': new FormControl('', Validators.required),
    //   'description': new FormControl('', Validators.required),
    //   'date': new FormControl(this.currentDate, Validators.required)
    // });

    this.taskForm = this.fb.group({
      taskTitle: ['', Validators.required],
      description: [''],
      date: [this.currentDate, Validators.required]
    });
    console.log(this.taskForm);
  }

  onSubmit() {
    // this.taskObj.title = this.taskForm.get('taskTitle').value;
    // this.taskObj.description = this.taskForm.get('description').value;
    // this.taskObj.date = this.taskForm.get('date').value;

    this.taskObj.title = this.taskForm.value.taskTitle;
    this.taskObj.description = this.taskForm.value.description ? this.taskForm.value.description : 'N/A';
    this.taskObj.date = this.taskForm.value.date;
    console.log(this.taskObj);


    this.taskSer.setData(this.taskObj);
    console.log({ ...this.taskObj });
    this.taskArr = this.taskSer.getdata();
    console.log(this.taskArr);
  }

// Form Template

In this form template the default value to date input is not set throught the data binding. The form is reactive form and the default value is set through the form builder instance.

  <form class="form-horizontal" [formGroup]="taskForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="title" class="col-sm-2 control-label">Title *</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="taskTitle" placeholder="Title of Task" formControlName="taskTitle" [ngClass]="{isValid: taskForm.get('taskTitle').valid, isInvalid: !taskForm.get('taskTitle').valid && taskForm.get('taskTitle').touched}">
        <span class="help-block" *ngIf="!taskForm.get('taskTitle').valid && taskForm.get('taskTitle').touched">Please enter the Task Title</span>
      </div>
    </div>
    <div class="form-group">
      <label for="description" class="col-sm-2 control-label">Description *</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="description" placeholder="Enter Your Description" formControlName="description">
        <!-- <span class="help-block" *ngIf="!taskForm.get('description').valid && taskForm.get('description').touched">Please enter the Task description</span> -->
      </div>
    </div>
    <div class="form-group">
      <label for="date" class="col-sm-2 control-label">Date of Completion *</label>
      <div class="col-sm-10">
        <input type="date" class="form-control" id="date" formControlName="date" [ngClass]="{isVaid: taskForm.get('date').valid, isInvalid: !taskForm.get('date').valid && taskForm.get('date').touched}">
        <span class="help-block" *ngIf="!taskForm.get('date').valid && taskForm.get('date').touched">Please chose a date for task completion</span>
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-offset-5">
        <button type="submit" class="btn btn-default" [disabled]="!taskForm.valid">Submit your data</button>
        <button type="button" class="btn btn-default" [disabled]="!taskForm.touched" (click)="reset()">Reset Form</button>
      </div>
    </div>
  </form>

Solution

Reset sets the values to the default, but for the date, currentDate is not the default. To set it as you intend, add this:

  reset() {
    this.taskForm.reset();
    this.taskForm.get('date').patchValue(this.currentDate); //this line
  }

demo

Answered By – Vega

Answer Checked By – Marilyn (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published.