RequiredWith
The Required With rule makes a field mandatory only when at least one of a set of other named fields is present — required_with:requiredWith_1,requiredWith_2 means the current field must be filled in if either requiredWith_1 or requiredWith_2 has a value. It's a good fit for grouped optional information where filling in part of the group implies the rest is needed too, like requiring a 'city' field as soon as either a 'street address' or 'postal code' field has been entered. As with the other conditional-required rules, every field being watched needs to be defined or initialized before the field that depends on it.
#Directive Code Snippet
<!DOCTYPE html>
<html lang="en">
...
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<input requiredWith="<TARGET_FIELDS>" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
<ng-absolute-validator [formInstance]="<name>"></ng-absolute-validator>
</form>
...
</html>
#Chain Rule Code Snippet
<!DOCTYPE html>
<html lang="en">
...
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<input rule="required_with:<TARGET_FIELDS>" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
<ng-absolute-validator [formInstance]="<name>"></ng-absolute-validator>
</form>
...
</html>
#Reactive Form Code Snippet
//component.ts
export class ReactiveComponent{
public form !: FormGroup;
constructor(
private fb : FormBuilder,
private rv : ReactiveValidator,
){this.generteForm()}
generteForm(){
this.form = this.fb.group({
<name> : ['',this.rv.map('required_with:<TARGET_FIELDS>',<CUSTOM_MESSAGE>)]
})
}
}
//component.html
<!DOCTYPE html>
<html lang="en">
...
<form [formGroup]="form">
<input type="text" name="<name>" formControlName="<name>">
<ng-absolute-validator [formInstance]="form.get(<name>)"></ng-absolute-validator>
</form>
...
</html>