onReset removes the default value of date

user_8724686 0
Viewed 1309

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>
angular2-forms angular typescript javascript
3 Answers

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

user_54684630

You could do the same as Vega commented in another way:

reset() {
  this.taskForm.reset({date : this.currentDate});
}
user_61058240

Add to your constructor this:

constructor(protected changeDetectorRef: ChangeDetectorRef){}

In your reset method use changeDetectorRef to detect the default value

reset(){
   this.taskForm.reset();
   this.changeDetectorRef.detectChanges();
   // assign default value
}
user_95190200
Related