2
ページの読み込み時に、日付入力フィールドの日付が現在の日付に設定されます。フォームがリセットされたとき、図に示すように、しかし、デフォルトの日付は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);
}
//フォームテンプレート
彼のフォームテンプレートは、日付入力のデフォルト値はデータバインディングを介して設定されていません。フォームはリアクティブフォームであり、デフォルト値はフォームビルダーインスタンスを通じて設定されます。
<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>