onReset 移除日期的默认值

Question

页面加载时，日期输入字段中的日期设置为当前日期。但是重置表单后，并没有恢复默认日期，而是日期字段被清空如图

on page load
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 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>

Answer 1

重置将值设置为默认值，但对于日期，currentDate 不是默认值。要按照您的意愿进行设置，请添加：

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

demo

Answer 2

你可以用另一种方式像 Vega 评论的那样做：

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

Answer 3

将此添加到您的构造函数中：

constructor(protected changeDetectorRef: ChangeDetectorRef){}

在您的重置方法中使用 changeDetectorRef 检测默认值

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

onReset 移除日期的默认值

onReset removes the default value of date

angular

angular2-forms

angular2-directives

angular-forms