Question

我是新手。我有一种情况，我只需要表单中5个字段中的一个字段，这意味着如果用户至少填写了一个字段，则表单有效。

谢谢。

Answer 1

由于仅当其中一个字段为非空时才需要检查整个表单的有效性，因此您可以手动设置有效性，如下所示：

if(!this.valid){
    this.form.setErrors({ 'invalid': true});
}else{
    this.form.setErrors(null);
}

this.valid是您的条件，您可以根据该条件设置有效性

您可以查看示例：https://angular-exmphk.stackblitz.io

您还可以检查答案：FormGroup validation in "exclusive or"会根据某些条件进行形式验证

希望这会有所帮助

Answer 2

查看此电话号码验证器示例

import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { NumberValidator } from '../validators/form-validators';


constructor(
    private fb: FormBuilder){}

FormName: FormGroup = this.fb.group({
    phoneNumber: ['', NumberValidator]    
  });

在表单验证器文件中

import { AbstractControl, ValidatorFn } from '@angular/forms';

export const NumberValidator = (): ValidatorFn => {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const mobileRegex = /^[()-\d\s]*$/g;
    const result = mobileRegex.test(control.value);
    return result ? null : { mobileInvalid: { value: control.value } };
  };
};

如果您有任何疑问，请告诉我。

Answer 3

    <form [formGroup]="formdata">
<div class="form-group">
    <label for="fieldlabel1">fieldLabel1</label>
    <input type="text" id="fieldlabel1" formControlName="fieldName1" class="form-control"><br>
    <label for="fieldlabel2">fieldLabel2</label>
    <input type="text" id="fieldlabel2" formControlName="fieldName2" class="form-control">
</div>
 </form>

<div class="row">
      <div class="col-sm-12">
        <button type="submit" value="submit" (click)="somefunctioncall()" [disabled]="formdata.invalid">
          Submit
        </button>
      </div>
</div>



import { FormGroup, FormControl, Validators } from '@angular/forms';
import { OnInit } from '@angular/core';

export class test {

formdata: FormGroup;

 ngOnInit() {


  this.formdata = new FormGroup({

      fieldName1: new FormControl("", Validators.compose([
        Validators.required
      ])),
      fieldName2: new FormControl("", Validators.compose([
        // remove required validation for one you dont need.
      ]))
    })   
 }
}

Answer 4

请参阅https://angular.io/guide/form-validation中的自定义验证器和跨域验证

我们应用程序中的准确示例，其中必须至少输入一个电话号码字段。这是一个验证函数，即实现https://angular.io/api/forms/ValidatorFn

const Menu = () => Array(maxColNumber / 2).fill().map((_, i) => {
    const onClick = () => setBeginAfter(docLimit * i)
    return (
        <div className='collection'>
            <div
                className='collection__set'
                onClick={onClick}
                >
                Next 2 data
            </div>
        </div>
    )
})
// later in your code , just add the tag
<Menu />

成员是我们的类，用于定义所有表单字段，您的代码将有所不同，但自定义验证器的示例应有所帮助。

Angular 6仅需要多个字段中的一个字段

4 个答案: