Угловая проверка не работает, когда имя функции упоминается в HTML

Question

Угловая проверка не работает, когда я использую имя функции проверки в HTML.

Если я удаляю ее, это работает.

    export class RegisterComponent implements OnInit {
    ngOnInit() {
    }
    constructor (private formBuilder: FormBuilder,
        private titleService: Title,
        private _router: Router) {
        this.setTitle('BS - Register New');
    }

    // tslint:disable-next-line: member-ordering
    registerForm: FormGroup = new FormGroup ({
        orgName: new FormControl(null,
        [Validators.required,
        Validators.minLength(5),
        this.checkOrgName
        ] )
    });

    checkOrgName (controls: AbstractControl): ValidationErrors | null{
        if (controls.value === 'ABCDEF') {
            console.log("Error")
            return {incorrectOrg: 'Company Name can not be ABCDEF'}
        } else {
            return null;
        }
    }

HTML-код

div class="form-group">
        <label for="orgName">Organization Name</label>
        <!-- Name , and formControlName should be same as in ts file  -->
        <input
          name="orgName"
          formControlName="orgName"
          type="text"
          id="orgName"
          placeholder="Organization Name"
          class="form-control"
          autofocus
          [class.is-invalid]="registerForm.get('orgName').invalid &&
                              registerForm.get('orgName').touched">

        <div *ngIf="registerForm.get('orgName').invalid &&
                    registerForm.get('orgName').touched">

          <!-- <small *ngIf="registerForm.get('orgName').errors?.required" -->
          <small *ngIf="registerForm.get('orgName').errors?.required"
                  class="text-danger">
               Organization Name is Required
          </small>

          <small *ngIf="registerForm.get('orgName').errors?.minlength"
                  class="text-danger">
              Organization Name should be more than 5 Characters long
          </small>

          <small

*ngIf="registerForm.controls.orgName.errors?.checkOrgName"
                    class="text-danger">
            {{registerForm.get('orgName').errors['incorrectOrg']}}
          </small>
        </div>
      </div>

В приведенном выше коде проверка работает, но ошибка не отображается,

** Но если я заменю "* ngIf =" registerForm.controls.orgName.errors? .CheckOrgName "от "* ngIf =" registerForm.controls.orgName.errors "в HTML **

Сообщение об ошибке отображается успешно.

Пожалуйста, помогите мне, дайте мне знатьВ чем ошибка в коде, если имя функции упоминается в HTML?

С уважением, Ашиш

Answer 1

Вы должны использовать key объекта, который вы вернули из валидатора.

То есть в шаблоне должно быть *ngIf="registerForm.controls.orgName.errors?.incorrectOrg".