我在Angular 7中有一个反应形式，其中有三个字段，电子邮件，电话和寻呼机。我的要求是，至少应由用户填写其中之一，否则我们将引发类似“请指定通知之一（电子邮件，SMS或寻呼机）”的错误。
我尝试编写自定义通知，但无法正常工作。您能帮我解决我哪里出问题了。
以下是我的HTML代码：
<form class="form-horizontal" [formGroup]="editorForm">
<div class="form-group" required>
<label for="emailAdressInput">Email Addresses</label>
<input type="text" id="emailAdressInput" formControlName="emailAdresses">
</div>
<div class="form-group" required>
<label for="phoneNumberInput">Email Addresses</label>
<input type="text" id="phoneNumberInput" formControlName="phoneNumber">
</div>
<div class="form-group" required>
<label for="pagerNumberInput">Email Addresses</label>
<input type="text" id="pagerNumberInput" formControlName="pagerNumber">
</div>
</form>
以下是component.ts代码：
this.editorForm = this._formBuilder.group({
displayLabel: ['', Validators.required],
emailAdresses: [''],
phoneNumber: [''],
notification: this._formBuilder.group({
pagerNumber: [''],
phoneNumber: [''],
emailAdresses: ['']
}, this.atLeastOneValidator()),
pagerNumber: [''],
});
public atLeastOneValidator = () => {
return (controlGroup) => {
let controls = controlGroup.controls;
if ( controls ) {
let theOne = Object.keys(controls).find(key=> controls[key].value!=='');
if ( !theOne ) {
return {
atLeastOneRequired : {
text : 'At least one should be selected'
}
}
}
}
return null;
};
};
我已经在stackblitz中解决了它：https ://stackblitz.com/edit/angular-j3i4yg
export class AppComponent {
name = 'Angular';
editorForm: FormGroup;
// _formBuilder: FormBuilder = new FormBuilder();
constructor(private _formBuilder: FormBuilder) {
this.editorForm = this._formBuilder.group({
displayLabel: ['', Validators.required],
emailAdresses: [''],
phoneNumber: [''],
notification: this._formBuilder.group({
pagerNumber: [''],
phoneNumber: [''],
emailAdresses: ['']
}, { validators: this.atLeastOneValidator }),
pagerNumber: [''],
});
}
public atLeastOneValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
let controls = control.controls;
console.log(controls);
if (controls) {
let theOne = Object.keys(controls).findIndex(key => controls[key].value !== '');
if (theOne === -1) {
console.log(theOne);
return {
atLeastOneRequired: {
text: 'At least one should be selected'
}
}
}
};
}
}
范本：
<form class="form-horizontal" [formGroup]="editorForm">
<fieldset formGroupName="notification">
<div class="form-group" required>
<label for="emailAdressInput">Email Addresses</label>
<input type="text" id="emailAdressInput" formControlName="emailAdresses">
</div>
<div class="form-group" required>
<label for="phoneNumberInput">Email Addresses</label>
<input type="text" id="phoneNumberInput" formControlName="phoneNumber">
</div>
<div class="form-group" required>
<label for="pagerNumberInput">Email Addresses</label>
<input type="text" id="pagerNumberInput" formControlName="pagerNumber">
</div>
</fieldset>
{{editorForm.get('notification')?.errors| json}}
<br>
<br>
<span *ngIf="editorForm.get('notification')?.errors?.atLeastOneRequired"> {{editorForm.get('notification')?.errors?.atLeastOneRequired.text}}</span>
</form>
检查并让我知道是否有任何疑问。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句