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); 
    } 

// 양식 서식

t에서

그의 양식 서식 파일에서 날짜 입력의 기본값은 데이터 바인딩을 통해 설정되지 않습니다. 양식은 반응 형 양식이며 기본값은 양식 작성기 인스턴스를 통해 설정됩니다.

<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