Angular 6只需要多个字段中的一个字段Reactive Form

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验证在"；排他或"排他"；它确实基于某种条件进行形式验证

希望这能帮助

Answer 2

请参阅中的自定义验证器和跨字段验证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是我们定义所有表单字段的类，您的代码会有所不同，但自定义验证器的示例应该会有所帮助。

Answer 3

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

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 = /^[()-ds]*$/g;
const result = mobileRegex.test(control.value);
return result ? null : { mobileInvalid: { value: control.value } };
};
};

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

Answer 4

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