Angular state not switching upon conditional change-CodePudding

First, the Typescript code, followed by the HTML:

public checkValue() {
    let finalChoice = false;
    if (typeof this.formUser.permissionsTemplateID === undefined) {
      finalChoice = true;
    }
    return finalChoice;
  }

<div >
  <label for="template">Permissions Template</label>
  <kendo-dropdownlist onChange="checkValue()" required name="template" [data]="templates" [(ngModel)]="formUser.permissionsTemplateID" [valuePrimitive]="true" textField="name" valueField="id"></kendo-dropdownlist>
  <div [hidden]="checkValue()" >Please enter a valid permissions template.</div>
</div>

So, I'm fairly certain that I'm missing just one small detail here. I would like this warning mentioned when you first jump to the page (not the way I'd do it, but I have my orders) and then once someone selects from the drop down menu, then the error message should go away.

CodePudding user response：

At first sight, when comparing the type of this.formUser.permissionsTemplateID you should check against a string ('undefined' instead of undefined):

if (typeof this.formUser.permissionsTemplateID === 'undefined') {