比较 2 个输入字段的值以验证 Angular 中的表单 7 通过模板
Compare the values of 2 input fields to validate the form in Angular 7 through the template
我在转向 Angular 7 的第一周,我一直在使用基于模板的基本验证在我的项目中制作基本表单,但我现在需要基于一个字段的值必须高于另一个
我已经尝试在组件控制器中使用这些值本身,但是虽然我能够确认这些值是否有效,但我无法使用此代码向用户显示问题所在
if (issueThresholdForm.value.lowScore > issueThresholdForm.value.highScore) {
// Show user error
// This is the messing part, I guess
}
这是我正在使用的模板
<div *ngIf="_issueCategory">
<form (submit)="submitIssueThreshold(issueThresholdForm)" #issueThresholdForm="ngForm">
<mat-form-field class="half-width" floatLabel="always">
<mat-label [translate]="'issueThreshold.modals.highScore'"></mat-label>
<input name="highScore" type="number" matInput placeholder="0" [(ngModel)]="_issueCategory.highScore"
required #highScore="ngModel">
</mat-form-field>
<mat-form-field class="half-width" floatLabel="always">
<mat-label [translate]="'issueThreshold.modals.lowScore'"></mat-label>
<input name="lowScore" type="number" matInput placeholder="0" [(ngModel)]="_issueCategory.lowScore"
required #lowScore="ngModel">
</mat-form-field>
<mat-form-field class="full-width" floatLabel="always">
<mat-label [translate]="'issueThreshold.modals.description'"></mat-label>
<textarea name="description" matInput [(ngModel)]="_issueCategory.thresholdDescription">
</textarea>
</mat-form-field>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" [translate]="'modal-confirm.cancel'"></button>
<button type="submit" class="btn btn-primary primary" [disabled]="issueThresholdForm.invalid || issueThresholdForm.pristine" [translate]="'modal-confirm.submit'"></button>
</div>
</form>
</div>
您可以按如下方式使用Custom Validations
in Reactive Forms
。
HTML
<div>
<form [formGroup]="myForm">
<label>Low Score: </label>
<input formControlName="lowScore" type="number">
<br/><br/>
<label>High Score: </label>
<input formControlName="highScore" type="number">
<div>
<span style="color: red" *ngIf="myForm.get('highScore').touched && myForm.get('highScore').hasError('higherThan')">High score should be higher than lower score.</span>
</div>
</form>
</div>
TS
export class AppComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
highScore: new FormControl(0, [this.lowerThan('lowScore')]),
lowScore: new FormControl(0, null)
});
}
lowerThan(field_name): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } => {
const input = control.value;
const isLower = control.root.value[field_name] >= input;
return isLower ? {'lowerThan': {isLower}}: null;
};
}
}
找工作StackBlitz Here.
编辑:
以反应方式使用相同的解决方案进行编辑。所以创建表单组并添加附加到表单组的自定义验证器:
_issueCategory = { lowScore: 1, highScore: 2 };
issueThresholdForm: FormGroup;
constructor(private fb: FormBuilder) {
this.issueThresholdForm = this.fb.group({
highScore: [this._issueCategory.highScore, [Validators.required]],
lowScore: [this._issueCategory.lowScore, [Validators.required]]
}, { validators: validateScore })
}
验证器函数:
export function validateScore(
control: AbstractControl
): ValidationErrors | null {
if (control && control.get("highScore") && control.get("lowScore")) {
const highscore = control.get("highScore").value;
const lowscore = control.get("lowScore").value;
return (lowscore > highscore) ? { scoreError: true } : null
}
return null;
}
然后你可以删除 ngModel(重要!),因为它们不应该与反应形式混合。您还可以删除表单的所有验证,例如 required
,因此最终输入看起来很简单:
<input type="number" matInput placeholder="0" formControlName="lowScore">
原文:
我强烈,强烈建议Reactive forms,一开始他们可能会感到困惑,但完全值得。您可以更好地控制表单,正如 Nithin Kumar Biliya 在评论中提到的那样,单元测试更容易。
话虽这么说....
这是一个使用模板驱动表单的解决方案,因为这正是您当前正在使用的。
你可以创建一个附加到表单标签的指令,在该指令中有一个验证器来比较 highscore 和 lowscore 的值并将错误附加到表单,或者 return null
(在表格中被认为是有效的)。所以验证器看起来像这样:
import { Directive } from "@angular/core";
import {
AbstractControl,
NG_VALIDATORS,
Validator,
ValidationErrors
} from "@angular/forms";
@Directive({
selector: "[scoreValidation]",
providers: [
{
provide: NG_VALIDATORS,
useExisting: ScoreValidatorDirective,
multi: true
}
]
})
export class ScoreValidatorDirective implements Validator {
constructor() {}
// here control is the formgroup
validate(control: AbstractControl): ValidationErrors | null {
if (control && control.get("highScore") && control.get("lowScore")) {
// the form controls and their value
const highscore = control.get("highScore").value;
const lowscore = control.get("lowScore").value;
// not valid, return an error
if (lowscore > highscore) {
return { scoreError: true };
}
// valid
return null;
}
// form controls do not exist yet, return null
return null;
}
}
将指令添加到您的应用程序模块中的声明数组,只需将此指令附加到表单标签即可使用它:
<form .... scoreValidation>
并且可以使用 *ngIf="issueThresholdForm.hasError('scoreError')
显示错误
我强烈推荐响应式表单,但如果你想这样做,你可以:
将以下p tag
放在低分输入下面:
<p class="text-danger" [hidden]="(lowerScore.value > higerScore.value ? false: true) || (lowScore.pristine && !issueThresholdForm.submitted)">
The lower scrore can not be greater than higer score
</p>
我在转向 Angular 7 的第一周,我一直在使用基于模板的基本验证在我的项目中制作基本表单,但我现在需要基于一个字段的值必须高于另一个
我已经尝试在组件控制器中使用这些值本身,但是虽然我能够确认这些值是否有效,但我无法使用此代码向用户显示问题所在
if (issueThresholdForm.value.lowScore > issueThresholdForm.value.highScore) {
// Show user error
// This is the messing part, I guess
}
这是我正在使用的模板
<div *ngIf="_issueCategory">
<form (submit)="submitIssueThreshold(issueThresholdForm)" #issueThresholdForm="ngForm">
<mat-form-field class="half-width" floatLabel="always">
<mat-label [translate]="'issueThreshold.modals.highScore'"></mat-label>
<input name="highScore" type="number" matInput placeholder="0" [(ngModel)]="_issueCategory.highScore"
required #highScore="ngModel">
</mat-form-field>
<mat-form-field class="half-width" floatLabel="always">
<mat-label [translate]="'issueThreshold.modals.lowScore'"></mat-label>
<input name="lowScore" type="number" matInput placeholder="0" [(ngModel)]="_issueCategory.lowScore"
required #lowScore="ngModel">
</mat-form-field>
<mat-form-field class="full-width" floatLabel="always">
<mat-label [translate]="'issueThreshold.modals.description'"></mat-label>
<textarea name="description" matInput [(ngModel)]="_issueCategory.thresholdDescription">
</textarea>
</mat-form-field>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" [translate]="'modal-confirm.cancel'"></button>
<button type="submit" class="btn btn-primary primary" [disabled]="issueThresholdForm.invalid || issueThresholdForm.pristine" [translate]="'modal-confirm.submit'"></button>
</div>
</form>
</div>
您可以按如下方式使用Custom Validations
in Reactive Forms
。
HTML
<div>
<form [formGroup]="myForm">
<label>Low Score: </label>
<input formControlName="lowScore" type="number">
<br/><br/>
<label>High Score: </label>
<input formControlName="highScore" type="number">
<div>
<span style="color: red" *ngIf="myForm.get('highScore').touched && myForm.get('highScore').hasError('higherThan')">High score should be higher than lower score.</span>
</div>
</form>
</div>
TS
export class AppComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
highScore: new FormControl(0, [this.lowerThan('lowScore')]),
lowScore: new FormControl(0, null)
});
}
lowerThan(field_name): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } => {
const input = control.value;
const isLower = control.root.value[field_name] >= input;
return isLower ? {'lowerThan': {isLower}}: null;
};
}
}
找工作StackBlitz Here.
编辑:
以反应方式使用相同的解决方案进行编辑。所以创建表单组并添加附加到表单组的自定义验证器:
_issueCategory = { lowScore: 1, highScore: 2 };
issueThresholdForm: FormGroup;
constructor(private fb: FormBuilder) {
this.issueThresholdForm = this.fb.group({
highScore: [this._issueCategory.highScore, [Validators.required]],
lowScore: [this._issueCategory.lowScore, [Validators.required]]
}, { validators: validateScore })
}
验证器函数:
export function validateScore(
control: AbstractControl
): ValidationErrors | null {
if (control && control.get("highScore") && control.get("lowScore")) {
const highscore = control.get("highScore").value;
const lowscore = control.get("lowScore").value;
return (lowscore > highscore) ? { scoreError: true } : null
}
return null;
}
然后你可以删除 ngModel(重要!),因为它们不应该与反应形式混合。您还可以删除表单的所有验证,例如 required
,因此最终输入看起来很简单:
<input type="number" matInput placeholder="0" formControlName="lowScore">
原文:
我强烈,强烈建议Reactive forms,一开始他们可能会感到困惑,但完全值得。您可以更好地控制表单,正如 Nithin Kumar Biliya 在评论中提到的那样,单元测试更容易。
话虽这么说....
这是一个使用模板驱动表单的解决方案,因为这正是您当前正在使用的。
你可以创建一个附加到表单标签的指令,在该指令中有一个验证器来比较 highscore 和 lowscore 的值并将错误附加到表单,或者 return null
(在表格中被认为是有效的)。所以验证器看起来像这样:
import { Directive } from "@angular/core";
import {
AbstractControl,
NG_VALIDATORS,
Validator,
ValidationErrors
} from "@angular/forms";
@Directive({
selector: "[scoreValidation]",
providers: [
{
provide: NG_VALIDATORS,
useExisting: ScoreValidatorDirective,
multi: true
}
]
})
export class ScoreValidatorDirective implements Validator {
constructor() {}
// here control is the formgroup
validate(control: AbstractControl): ValidationErrors | null {
if (control && control.get("highScore") && control.get("lowScore")) {
// the form controls and their value
const highscore = control.get("highScore").value;
const lowscore = control.get("lowScore").value;
// not valid, return an error
if (lowscore > highscore) {
return { scoreError: true };
}
// valid
return null;
}
// form controls do not exist yet, return null
return null;
}
}
将指令添加到您的应用程序模块中的声明数组,只需将此指令附加到表单标签即可使用它:
<form .... scoreValidation>
并且可以使用 *ngIf="issueThresholdForm.hasError('scoreError')
我强烈推荐响应式表单,但如果你想这样做,你可以:
将以下p tag
放在低分输入下面:
<p class="text-danger" [hidden]="(lowerScore.value > higerScore.value ? false: true) || (lowScore.pristine && !issueThresholdForm.submitted)">
The lower scrore can not be greater than higer score
</p>