title: how to make a custom validator in angular to check a form field based on the other form field?
body: <p>The typescript for the component is:</p>
  <pre><code>export class EtcAddAuthorityComponent implements OnInit {
     addAuthorityForm: FormGroup;
     authTypes: any[] = [];
     loading = false;
     numericRegex = /^[0-9]*$/;
  
     alphabeticRegex = /^[a-zA-Z]*$/;
  
     constructor(
        private readonly dialogRef: MatDialogRef&lt;EtcAddAuthorityComponent&gt;,
        private readonly fb: FormBuilder,
        private readonly toastr: ToastrService,
        private readonly ecmService: EcmService,
        private readonly ecmToolChangeService: EcmToolChangeService,
        private readonly cgpAlertDialogService: CgpAlertDialogService,
        @Inject(MAT_DIALOG_DATA) public readonly selectedTool: any
     ) {
        this.addAuthorityForm = this.fb.group({
           authNumber: ['', [Validators.maxLength(20), Validators.pattern(this.alphabeticRegex)]],
           authNumberN: ['', [Validators.required, Validators.maxLength(20), Validators.pattern(this.numericRegex)]],
           authTypeName: ['', [Validators.required, Validators.maxLength(10)]],
           authDescription: ['', [Validators.maxLength(500)]]
        });
     }
  
  
  
     ngOnInit() {
        this.loading = true;
        this.ecmService.getAuthTypeCriteria()
           .subscribe({
              next: (res) =&gt; {
                 if (res) {
                    this.authTypes = res;
                 }
              },
              complete: () =&gt; this.loading = false
           });
     }
  
     onCancelClick() {
        this.dialogRef.close();
     }
  
     onAddClick() {
  
        const authNFieldifAuthTypeName = this.authFieldCheck();
        if (authNFieldifAuthTypeName === true) {
           return;
        }
        else {
  
           const body = {
              ...this.addAuthorityForm.value,
              partChangeId: this.selectedTool.partChangeId,
              toolChangeId: this.selectedTool.toolChangeId
           };
  
           this.loading = true;
           this.ecmToolChangeService.addAuthority(body)
              .subscribe({
                 next: (res) =&gt; {
                    this.cgpAlertDialogService.showAlertDialog({
                       title: 'Add Authority',
                       message: 'Authority was added successfully!',
                       alert: cgpAlertTypes.success,
                       closeLabel: 'OK'
                    }).afterClosed().subscribe(() =&gt; this.dialogRef.close({ reload: true }));
                 },
                 error: (err) =&gt; {
                    this.loading = false;
                    this.cgpAlertDialogService.showAlertDialog({
                       title: 'Add Authority',
                       message: 'Authority could not be added. Please try again!',
                       alert: cgpAlertTypes.danger,
                       closeLabel: 'OK'
                    });
                 },
                 complete: () =&gt; this.loading = false
              });
        }
     }
  
     authFieldCheck(): boolean {
        const matched: boolean = (this.addAuthorityForm.controls.authTypeName.value === 'EWO') &amp;&amp; (!this.addAuthorityForm.controls.authNumber.value);
  
        if (matched) {
           this.addAuthorityForm.controls.authTypeName.setErrors({
              notFilled: true
           });
        }
        else {
           this.addAuthorityForm.controls.authTypeName.setErrors({ notMatched: false });
        }
        return matched;
     }
  
  
  }
  </code></pre>
  <p>The html code is:</p>
  <pre><code>&lt;h1 mat-dialog-title&gt;Add Authority&lt;/h1&gt;
  &lt;div mat-dialog-content&gt;
     &lt;form class=&quot;flex-dialog-container&quot; [formGroup]=&quot;addAuthorityForm&quot;&gt;
        &lt;mat-form-field&gt;
           &lt;mat-label&gt;Authority #(alpha)&lt;/mat-label&gt;
           &lt;input matInput autocomplete=&quot;off&quot; formControlName=&quot;authNumber&quot; #authNumber&gt;
           &lt;mat-error *ngIf=&quot;authNumber.value?.length &gt; 20&quot;&gt;Cannot exceed 20 characters.&lt;/mat-error&gt;
        &lt;/mat-form-field&gt;
  
        &lt;mat-form-field&gt;
           &lt;mat-label&gt;Authority #(numeric)&lt;/mat-label&gt;
           &lt;input matInput autocomplete=&quot;off&quot; formControlName=&quot;authNumberN&quot; #authNumberN&gt;
           &lt;mat-error *ngIf=&quot;addAuthorityForm.controls.authNumberN.hasError('required')&quot;&gt;Required&lt;/mat-error&gt;
           &lt;mat-error *ngIf=&quot;authNumberN.value?.length &gt; 20&quot;&gt;Cannot exceed 20 characters.&lt;/mat-error&gt;   
        &lt;/mat-form-field&gt;
  
        &lt;mat-form-field&gt;
           &lt;mat-label&gt;Authority Type&lt;/mat-label&gt;
  
           &lt;mat-select formControlName=&quot;authTypeName&quot;&gt;
              &lt;mat-option *ngFor=&quot;let at of authTypes&quot; [value]=&quot;at.authTypeName&quot;&gt;
                 {{at.authTypeName}}
              &lt;/mat-option&gt;
           &lt;/mat-select&gt;
           &lt;mat-error *ngIf=&quot;addAuthorityForm.controls.authTypeName.hasError('required')&quot;&gt;Required&lt;/mat-error&gt;
           &lt;mat-error *ngIf=&quot; this.addAuthorityForm.controls.authTypeName.hasError('notFilled')&quot;&gt;Authority #(alpha) required&lt;/mat-error&gt;
        &lt;/mat-form-field&gt;
  
        &lt;mat-form-field&gt;
           &lt;mat-label&gt;Authority Description&lt;/mat-label&gt;
           &lt;input matInput autocomplete=&quot;off&quot; formControlName=&quot;authDescription&quot; #authDescription&gt;
           &lt;mat-error *ngIf=&quot;authDescription.value?.length &gt; 500&quot;&gt;Cannot exceed 500 characters.&lt;/mat-error&gt;
        &lt;/mat-form-field&gt;
  
     &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;div mat-dialog-actions class=&quot;mat-dialog-actions-end no-margin&quot;&gt;
     &lt;button mat-raised-button mat-dialog-close cdkFocusInitial (click)=&quot;onCancelClick()&quot;
        (keypress.enter)=&quot;onCancelClick()&quot;&gt;Cancel&lt;/button&gt;
     &lt;button mat-raised-button color=&quot;primary&quot; (click)=&quot;onAddClick()&quot; (keypress.enter)=&quot;onAddClick()&quot; [disabled]=&quot;addAuthorityForm.invalid&quot;&gt;Add&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This is my add dialog box:
  <a href="https://i.stack.imgur.com/uUNXF.png" rel="nofollow noreferrer">The Add dialog box</a></p>
  <p>How to add a custom validation so that if 'EWO' option is chosen for the 'Authority Type' dropdown, it would show an error if the 'Authority# (Alpha)' is not entered. But it should not show any error if the 'EWO' option is chosen for the 'Authority Type' dropdown.</p>