Question

我必须验证ngForm中的输入元素之一

在提交表格时如何验证范围例如，用户应输入$ 1000到$ 2000之间的价格

请给出建议以继续进行

谢谢

Answer 1

尝试

<form [formGroup]="myForm">
<label for="priceRange">Price Range: </label>
 <input type="number" id="priceRange" formControlName="priceRange">
<div *ngIf="f.priceRange.errors">
 Invalid Price Range
</div>

在component.ts

中

import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';

   myForm = new FormGroup({});

   get f() { 
      return this.myForm.controls; 
    }

  constructor(private formBuilder: FormBuilder){
      this.myForm = formBuilder.group({     
     priceRange: ['', [Validators.min(1000), Validators.max(2000)]]
       });
    }

Answer 2

尝试这个工作示例

link

<h3>Reactive Forms Validator Example</h3>
<br>

<label>We have created two validators using slightly different approaches that validate if the input is equal to "A" or not.</label>
<br><br>

<label>Doesn't work because the method is not executed which will return the custom validator function.</label><br>
<input type="text" [formControl]="wrongOnlyA"> 
<br><br>

<label>Works because the method is executed.</label><br>
<input type="text" [formControl]="correctOnlyA"> 
<br><br>

<label>Works because the validator function is directly exported.</label><br>
<input type="text" [formControl]="onlyB">

.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup } from "@angular/forms"

import { RxFormBuilder } from '@rxweb/reactive-form-validators';
import { FormBuilderConfiguration  } from '@rxweb/reactive-form-validators';

import { EmployeeInfo } from '../employee-info.model';

@Component({
    selector: 'app-employee-info-add',
    templateUrl: './employee-info-add.component.html'
})
export class EmployeeInfoAddComponent implements OnInit {

    employeeInfoFormGroup: FormGroup

    constructor(
        private formBuilder: RxFormBuilder
    ) { }

    ngOnInit() {
        let employeeInfo = new EmployeeInfo();
        let formBuilderConfiguration = new FormBuilderConfiguration();
        formBuilderConfiguration.validations = {
            age : {
                range :  {minimumNumber:18,maximumNumber:60,} 
            },
            experience : {
                range :  {minimumNumber:2,maximumNumber:20,conditionalExpression:'x => x.age >=25',} 
            },
            salary : {
                range :  {minimumNumber:1000,maximumNumber:200000,message:'Your Salary should be between 10000 to 200000.',} 
            },
        };
        this.employeeInfoFormGroup = this.formBuilder.formGroup(employeeInfo,formBuilderConfiguration);
    }
}

角度6输入范围验证

2 个答案: