Условное обязательное поле не работает с использованием Angular8

Question

Я применяю условное обязательное поле, используя Angular8, но согласно моему коду оно не работает. Я объясняю свой код ниже.

 <mat-card-content *ngIf="isPOS || isShowRoom">
       <mat-form-field appearance="outline">
          <mat-label>Sales Agent Name</mat-label>
          <input matInput placeholder="Sales Agent Name" formControlName="SalesAgentName" #SalesAgentName maxlength="150" [readonly]="isPOS || isShowRoom" [required]="isPOS || isShowRoom">
          <!-- <mat-hint align="end">{{Name.value.length}} / 50</mat-hint> -->
       </mat-form-field>
       <div *ngIf="userForm.controls['SalesAgentName'].invalid && (userForm.controls['SalesAgentName'].dirty || userForm.controls['SalesAgentName'].touched)"
          class="alert alert-danger">
          <div *ngIf="userForm.controls['SalesAgentName'].errors.required">
             Sales Agent Name is required.
          </div>
       </div>
    </mat-card-content>

 this.userForm = this.fb.group({

      SalesAgentName: ['', Validators.required],
    });


    isPOS: boolean =false;
    isShowRoom: boolean = false;

    addUsers() {
      if (this.userForm.invalid) {
           console.log('Invalid');
      }
    }

Здесь у меня условный атрибут required. Когда isPOS & isShowRoom are true, то будет отображаться только необходимая проверка, в противном случае проверка не будет. Но в моем состоянии даже isPOS & isShowRoom are false, тогда он также показывает недопустимую функцию отправки. Мне нужно, когда выполняется какое-либо из обоих условий, тогда отображается сообщение проверки.