how to validate template driven forms in angular number sign "#"

Question

Hello guys? how can i Validate #permissionInput if there's a value, btw this is angular.

  <input
                          #permissionInput
                          type="text"
                          class="col dropdown"
                          placeholder="Select permission group ..."
                          (focus)="onFocus(dropdownContent)"
                          (blur)="onBlur()"
                          (input)="onInput(permissionInput.value)"
                          [ngClass]="{ 'is-invalid': pGroup.invalid && (pGroup.dirty || pGroup.touched) }"
                        />

 <small
                      *ngIf="permissionInput.value.invalid && (permissionInput.value.dirty || permissionInput.value.touched)"
                      class="form-text text-muted danger invalid-feedback1 ml-1"
                    >
                      <div *ngIf="permissionInput.value.errors.required">
                        Name is required.
                      </div>
                    </small>

``

Answer 1

You can do it like below:

<input
    #permissionInput="ngModel"
    type="text"
    required
    class="col dropdown"
    placeholder="Select permission group ..."
    (focus)="onFocus(dropdownContent)"
    (blur)="onBlur()"
    [ngModel]="somevariable"
    (ngModelChange)="onInput(permissionInput.value)"
    [ngClass]="{ 'is-invalid': pGroup.invalid && (pGroup.dirty || pGroup.touched) }"
/>
<small
    *ngIf="permissionInput.errors && (permissionInput.value.dirty || permissionInput.value.touched)"
    class="form-text text-muted danger invalid-feedback1 ml-1"
>
    <div *ngIf="permissionInput.errors.required">
        Name is required.
    </div>
</small>

somevariable: string;

onInput(value: string) {
   ...
   this.somevariable = value;
}

To make the input to raise an error when no value, you need to add required to the input. Also you can access the errors by using permissionInput.errors, not permissionInput.value.errors.