Multiple validation is not working properly in template driven form

I having issue multiple validation is not working properly. For example validate1 method checking input is empty or not , validation2 method checking name1 and name2 value are equal or not equal. For example name1= angular and name2 is empty. form valid is show is true but actual logic wise false

validate1() - set form valid false, validate2() - set form valid true, As per logic wise form is invalid

Note :

1. 
   Some scenario I will use validate1() only, Some scenario I will use validate2() only, Some scenario I will use Both
   
   
2. 
   validate1(), validate2() are sample logic. Also I need to method3 validatator via method2
   
   import { Component, Directive, OnChanges, OnInit, forwardRef, Input, Injector, ViewChild, NgForm } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { NG_VALIDATORS, ValidatorFn, AbstractControl, ValidationErrors, NgControl, ReactiveFormsModule, FormsModule, FormControl, } from '@angular/forms'; import { CommonModule } from '@angular/common';
   
   @Directive({
   selector: '[appdirective1]',
   standalone: true,
   })
   export class directiveName implements OnChanges, OnInit {
   @Input() varName1 = '';
   @Input() varName2 = '';
   @Input() callBack1!: (control: AbstractControl) => ValidationErrors | null;
   @Input() callBack2!: (control: AbstractControl) => ValidationErrors | null;
   constructor(private _injector: Injector) {}
   
   validate1(): ValidatorFn {
   return (control: AbstractControl): ValidationErrors | null => {
   //logic here it is sample logic
   return (control.value !== '' || control.value !== null || control.value !== undefined)
   ? {
   invalidName: control.value,
   }
   : null;
   };
   }
   validate2(): ValidatorFn {
   return (control: AbstractControl): ValidationErrors | null => {
   const obj1 = this.callBack1(control);
   
   return obj1;
   };
   }
   validate3(): ValidatorFn {
   return (control: AbstractControl): ValidationErrors | null => {
   const obj1 = this.callBack2(control);
   return obj1;
   };
   }
   ngOnInit() {
   this.conditionallyAddValidators();
   }
   
   conditionallyAddValidators() {
   const control = this._injector.get(NgControl);
   control?.control?.addValidators(this.validate1());
   if (this.varName1 !== '' && this.varName1 !== undefined) {
   control?.control?.addValidators(this.validate2());
   }
   if (this.varName2 !== '' && this.varName2 !== undefined) {
   control?.control?.addValidators(this.validate3());
   }
   control?.control?.updateValueAndValidity();
   }
   
   ngOnChanges() {
   this.conditionallyAddValidators();
   }
   }
   
   @Component({
   selector: 'app-root',
   standalone: true,
   imports: [directiveName, ReactiveFormsModule, CommonModule, FormsModule],
   template: `
   <form #f="ngForm">
   <input appdirective1 name="name1" [callBack1]="method2" [formControl]="control" [(ngModel)]="name1"/>
   <br/>
   
   <br/>
   <hr/>
   <input appdirective1 name="name2"" [callBack2]="method1" [(ngModel)]="name2" />
   <br/>
   {{f.valid | json}}
   <br/>
   <hr/>
   </form>
   `,
   })
   export class App {
   
   name1 = 'Angular';
   name2="";
   success = 'required';
   @ViewChild('f', {static:false}) form:NgForm;
   method1(control: AbstractControl) {
   const value = control?.value;
   return this.form.form.get('name2').value !==this.form.form.get('name1').value
   ?null
   : {
   minLength: true,
   };
   }
   
   method2(control: AbstractControl) {
   const value = control?.value;
   return value?.length >= 10
   ? {
   maxLength: true,
   }
   : null;
   }
   
   
   method3(control: AbstractControl) { //own logic return value?.length >= 10 ? { maxLength: true, } : null; } }
   
   bootstrapApplication(App);

Continue reading...