onResetは、日付のデフォルト値を削除します

Question

ページの読み込み時に、日付入力フィールドの日付が現在の日付に設定されます。フォームがリセットされたとき、図に示すように、しかし、デフォルトの日付は

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