Angular 6 只需要多个字段中的一个字段答案

【问题标题】：Angular 6 Required only one field from many fields Reactive FormAngular 6 只需要多个字段中的一个字段
【发布时间】：2019-05-06 16:36:38
【问题描述】：

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

提前致谢。

【问题讨论】：

你能分享一些代码来帮助我们识别你正在使用的表单类型吗？
您已经尝试过任何代码吗？你看过文档吗？ angular.io/guide/reactive-forms#step-2-making-a-field-required
@CruelEngine .. 我在 FormGroup 中使用响应式表单。
@user3492620 有人回答了
@CruelEngine。你能把链接分享给我吗？

标签： javascript forms validation angular6 angular-reactive-forms

【解决方案1】：

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

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 } };
  };
};

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

【讨论】：

感谢您的回答@Ravi。但我有不同的情况。表格中有很多字段。如果任何文件有数据，那么表格应该是有效的。
好的，知道了。像这样使用它 formfield: [ '', [ValidatorFunction()] ] 创建一个函数名称示例 ValidatorFunction 并将结果返回为有效或无效。您可以通过这种方式提交表单，也可以在任何字段有数据的情况下使表单有效
抱歉，没听懂。你能分享我的代码sn-p吗

【解决方案2】：

    <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.
      ]))
    })   
 }
}

【讨论】：

这需要根据需要设置 n 列之一...不是有条件的表单验证，它可以防止需要任何一个但如果两者都为空则使表单无效...

【解决方案3】：

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

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"，它会根据某些条件进行表单验证

希望对你有帮助

【讨论】：

感谢@CruelEngine

【解决方案4】：

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

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

import { AbstractControl } from "@angular/forms";
import { Member } from "../../members/member";

export function phone(control: AbstractControl): {[key: string]: any} {
  if (!control.parent) return;
  const form = control.parent;
  const member: Member = form.value;
  if (member.contactphone || member.mobile || member.contactphonesecond) {
    [
      form.controls['contactphone'],
      form.controls['mobile'],
      form.controls['contactphonesecond']
    ].forEach(control => {
      control.setErrors(null);
    });
  } else return {'noPhone': 'None of contact phones is specified'};
}

Member 是我们定义所有表单字段的类，您的代码会有所不同，但自定义验证器的示例应该会有所帮助。

【讨论】：