Question

最小和最大范围验证：在两个文本字段中均显示验证错误，而不是在编辑文本字段中显示，我使用了角形的反应式表单/ formGroups，但我找不到仅在编辑测试框时显示错误消息的方法

我尝试使用keyup事件（尽管找到了编辑输入字段0

class CrossFieldErrorMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return control.dirty && form.invalid ;
  }
}
function validRange(lowerLimit: string, upperLimit: string) {
  return (group: FormGroup): { [key: string]: any } => {
    const lower = group.controls[lowerLimit];
    const upper = group.controls[upperLimit];
    if (upper.value === null || (upper.value <= lower.value)) {
      return {
        invalidRangeUpper: false
      };
    }
    if (lower.value === null || (lower.value >= upper.value)) {
      return {
        invalidRangeLower: false
      };
    }
    /*if (lower.value >= upper.value) {
      return {
        invalidRangeUpper: true
      };
    }*/
  };
}
@Component({
  selector: 'app-dock-zone-row',
  templateUrl: './dock-zone-row.component.html',
  styleUrls: ['./dock-zone-row.component.scss']
})
export class DockZoneRowComponent implements OnInit {
  public rangeFormControl: FormGroup;
  public lowerLimitTouched: boolean;
  private invalidLowerTemp: boolean;

  constructor(private readonly a2Service: A2Service, private snackbar: MatSnackBar, private fb: FormBuilder) {
    this.lowerLimitTouched = false;
    this.rangeFormControl = this.fb.group({
      lowerLimit: new FormControl('', Validators.compose([
        Validators.required, Validators.max(99), Validators.min(0)
      ])),
      upperLimit: new FormControl('', Validators.compose([
        Validators.required, Validators.max(100), Validators.min(0)
      ]))
    }, {validator: validRange('lowerLimit', 'upperLimit')});
  }





 <form class="form-inline" [formGroup]="rangeFormControl">
    <mat-form-field >
      <input id="lower-limit" matInput min="0" max="99" formControlName="lowerLimit" type="number" name="lowerLimit" class="form-control"
             placeholder="Lower Threshold" [(ngModel)]="zoneConfig.lowerThresholdLimit" (keydown) ="inputChanged('lower')"
             [errorStateMatcher]="errorMatcher">
      <mat-error *ngIf="rangeFormControl.controls.lowerLimit.hasError('required') || rangeFormControl.controls.lowerLimit.hasError('min')
      || rangeFormControl.controls.lowerLimit.hasError('max')|| rangeFormControl.hasError('invalidRangeLower') || invalidLowerTemp">
        Should be a value between <strong>0 & 99 </strong> and lesser than upper threshold
      </mat-error>
    </mat-form-field>
    <mat-form-field >
      <input id="upper-limit" matInput min="0" max="100" formControlName="upperLimit" type="number" class="form-control"
             placeholder="Upper Threshold" [(ngModel)]="zoneConfig.upperThresholdLimit" (keydown)="inputChanged('upper')"
             [errorStateMatcher]="errorMatcher" >
      <mat-error *ngIf="rangeFormControl.controls.upperLimit.hasError('required') ||rangeFormControl.controls.upperLimit.hasError('min')
      ||rangeFormControl.controls.upperLimit.hasError('max')||rangeFormControl.hasError('invalidRangeUpper')">
        Should be a value between <strong>1 and 100</strong> and greater than lower threshold
      </mat-error>
    </mat-form-field>
    <button [disabled]="!rangeFormControl.valid" mat-icon-button *ngIf="!isBusy" (click)="save()"><i class="material-icons">save</i></button>
    <mat-spinner *ngIf="isBusy" diameter="24"></mat-spinner>
  </form>

Answer 1

使用Angular Validators 类

它具有 min（）和 max（）方法，请参见以下内容：

get fc() { return this.rangeFormControl.controls; }

this.rangeFormControl = this.fb.group({
    lowerLimit: new FormControl('',[Validators.required, Validators.max(this.rangeFormControl.controls['upperLimit'].value())]),
    upperLimit: new FormControl('',[Validators.required, Validators.min(this.rangeFormControl.controls['lowerLimit'].value())])
});

在您的表单上：

<mat-form-field >
    <input id="lower-limit" matInput min="0" max="99" formControlName="lowerLimit" type="number" name="lowerLimit" class="form-control"
            placeholder="Lower Threshold" [(ngModel)]="zoneConfig.lowerThresholdLimit" (keydown) ="inputChanged('lower')"
            [errorStateMatcher]="errorMatcher">
    <mat-error *ngIf="fc.lowerLimit.hasError('max')">
        Value should be lesser than upper threshold
    </mat-error>
</mat-form-field>

<mat-form-field >
    <input id="upper-limit" matInput min="0" max="100" formControlName="upperLimit" type="number" class="form-control"
            placeholder="Upper Threshold" [(ngModel)]="zoneConfig.upperThresholdLimit" (keydown)="inputChanged('upper')"
            [errorStateMatcher]="errorMatcher" >
    <mat-error *ngIf="fc.lowerLimit.hasError('min')">
        Value should be lesser than upper threshold
    </mat-error>
</mat-form-field>

最小和最大范围验证，两个文本字段中均显示验证错误，而不是在编辑文本框中显示

1 个答案: