Angular 输入表单在第一次点击时未验证(反应式表单)
Angular input form not validating on first click (Reactive form)
我正在制作一个日期选择器组件,需要对每个输入字段(月、日、年)进行验证。我希望我的日和年输入字段在月份的值有效之前被禁用,我的年输入在日有效之前被禁用。我的表单上有一个附加到 "validate" 方法的点击事件,该方法检查值是否大于 0 或 less/equal 到 12(有效月份值)。当我第一次单击输入字段以将值增加到 1 时,未调用验证函数。但是,它适用于第二次点击。
datepicker.component.ts
import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";
@Component({
selector: "app-datepicker",
templateUrl: "./datepicker.component.html",
styleUrls: ["./datepicker.component.css"]
})
export class DatepickerComponent implements OnInit {
myform: FormGroup;
dayDisabled: boolean = true;
yearDisabled: boolean = true;
ngOnInit() {
this.myform = new FormGroup({
month: new FormControl('', [Validators.required]),
day: new FormControl({ value: '', disabled: true }, [
Validators.required
]),
year: new FormControl(
{ value: '', disabled: true },
Validators.required
)
});
}
get month() {
return this.myform.get("month");
}
get day() {
return this.myform.get("day");
}
get year() {
return this.myform.get("year");
}
validate() {
if (this.month.value >= 13 || this.month.value === 0 || this.month.value === null) {
this.myform.controls.day.disable();
} else {
this.myform.controls.day.enable();
}
}
}
datepicker.component.html
<form [formGroup]="myform" (keyup)="validate()" (click)="validate()">
<fieldset>
<legend>
<span *ngIf="month.dirty && day.disabled">
Please enter a valid month
</span>
</legend>
<div>
<div>
<label>
Month
</label>
<input
type="number"
min="1"
max="12"
id="month"
formControlName="month"
name="month">
</div>
<div>
<label>
Day
</label>
<input
type="number"
min="1"
max="31"
id="day"
formControlName="day"
name="day">
</div>
<div>
<label>
Year
</label>
<input
type="number"
min="1900"
max="2019"
id="year"
formControlName="year"
name="year">
</div>
</div>
</fieldset>
</form>
通过添加 "input" 事件处理程序修复了它
<form [formGroup]="myform" (input)="validate()" (keyup)="validate()" (click)="validate()">
</form>
我正在制作一个日期选择器组件,需要对每个输入字段(月、日、年)进行验证。我希望我的日和年输入字段在月份的值有效之前被禁用,我的年输入在日有效之前被禁用。我的表单上有一个附加到 "validate" 方法的点击事件,该方法检查值是否大于 0 或 less/equal 到 12(有效月份值)。当我第一次单击输入字段以将值增加到 1 时,未调用验证函数。但是,它适用于第二次点击。
datepicker.component.ts
import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";
@Component({
selector: "app-datepicker",
templateUrl: "./datepicker.component.html",
styleUrls: ["./datepicker.component.css"]
})
export class DatepickerComponent implements OnInit {
myform: FormGroup;
dayDisabled: boolean = true;
yearDisabled: boolean = true;
ngOnInit() {
this.myform = new FormGroup({
month: new FormControl('', [Validators.required]),
day: new FormControl({ value: '', disabled: true }, [
Validators.required
]),
year: new FormControl(
{ value: '', disabled: true },
Validators.required
)
});
}
get month() {
return this.myform.get("month");
}
get day() {
return this.myform.get("day");
}
get year() {
return this.myform.get("year");
}
validate() {
if (this.month.value >= 13 || this.month.value === 0 || this.month.value === null) {
this.myform.controls.day.disable();
} else {
this.myform.controls.day.enable();
}
}
}
datepicker.component.html
<form [formGroup]="myform" (keyup)="validate()" (click)="validate()">
<fieldset>
<legend>
<span *ngIf="month.dirty && day.disabled">
Please enter a valid month
</span>
</legend>
<div>
<div>
<label>
Month
</label>
<input
type="number"
min="1"
max="12"
id="month"
formControlName="month"
name="month">
</div>
<div>
<label>
Day
</label>
<input
type="number"
min="1"
max="31"
id="day"
formControlName="day"
name="day">
</div>
<div>
<label>
Year
</label>
<input
type="number"
min="1900"
max="2019"
id="year"
formControlName="year"
name="year">
</div>
</div>
</fieldset>
</form>
通过添加 "input" 事件处理程序修复了它
<form [formGroup]="myform" (input)="validate()" (keyup)="validate()" (click)="validate()">
</form>