onReset刪除日期的默認值

在頁面加載時，日期輸入字段被設置爲當前日期。但是，當表單被重置，默認的日期不代替恢復日期字段被清除圖中所示onReset刪除日期的默認值

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

來源

2017-10-05 pepelearnscode

Reset將值設置爲默認值，但對於日期，currentDate不是默認值。將其設置爲你打算，補充一點：

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

demo

來源

2017-10-05 18:52:03 Vega

onReset刪除日期的默認值

回答

相關問題