RequiredWithAll

The Required With All rule makes a field mandatory only when every field in a given set is present — required_with_all:requiredWithAll_1,requiredWithAll_2 means the current field must be filled in only if both requiredWithAll_1 and requiredWithAll_2 have values, not just one of them. It's the stricter counterpart to Required With, suited to cases where a piece of information only becomes necessary once a whole related group has been completed, such as requiring a 'card expiry' field only after both a 'card number' and 'cardholder name' field have been filled in. 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 requiredWithAll="<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_all:<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_all:<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>