Check for empty angular object in html

Question

Im trying to disable a button on a condition whether an object is empty or not. In this case the object selectedTopics should be equal to {}

register.ts

ngOnInit() {
    this.topicRequestAnswer = {topics:[]};

    this.selectedTopics = {};  // <- setting equal to {} here
    this.requestTopics();
  }

register.html

<ion-content class="ion-padding">

  <form #form="ngForm" (ngSubmit)="register(form)">
    <ion-grid>
      <ion-row color="primary" class="ion-justify-content-center">
        <ion-col class="ion-align-self-center" size-md="6" size-lg="5" size-xs="12">
          <div class="ion-text-center">
            <h3>...</h3>
          </div>
          <div class="ion-padding">
            <ion-item>
              <ion-input [(ngModel)]="email" name="email" type="email" placeholder="E-Mail" ngModel required></ion-input>
            </ion-item>
            <ion-item>
              <ion-label>Choose a topic</ion-label>
              <ion-select [(ngModel)]="selectedTopics" name="topics" multiple="true" ngModel required>
                <ion-select-option *ngFor="let topic of topicRequestAnswer.topics" value="{{topic}}" class="ion-text-justify" ngModel required>{{topic}}</ion-select-option>
              </ion-select>
            </ion-item>
            <ion-item>
              <ion-input [(ngModel)]="name" name="username" type="username" placeholder="Username" ngModel required></ion-input>
            </ion-item>
            <ion-item>
              <ion-input [(ngModel)]="password" name="password" type="password" placeholder="Password" ngModel required></ion-input>
            </ion-item>
          </div>
          <div class="ion-padding">
            <ion-button size="large" type="submit" [disabled]="form.invalid || selectedTopics == {}" expand="block">Sign Up</ion-button>  // <- the [disabled] condition fails here
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>

The output im getting in my php script when I echo the empty $topics variable is

[object Object]

How do I need to change the condition in order to disable the button in case no topics were selected?

Probably a lot easier to make selectedTopics an array.. – MikeOne Jul 27 '20 at 17:29 — MikeOne, Jul 27 '20 at 17:29

Tejeshree · Accepted Answer · 2020-07-27T18:13:53.327

1

Your condition will be false even if this.selectedTopics = {};

since basic principle {} == {} also returns false, so will your condition in [disabled] = selectedTopics == {}

One way to check is:

Object.keys(this.selectedTopics).length === 0

To check in html:

(selectedTopics | json) == '{}'

edited Jul 27 '20 at 18:13

answered Jul 27 '20 at 16:40

Tejeshree

942
6
9

If I use your code it gives me following Error: cannot read property 'keys' of undefined – Huondui Jul 27 '20 at 17:27
Are you trying to access it in html? – Tejeshree Jul 27 '20 at 17:29
Yes, Im trying to put it in the [disabled] condition, removing the 'this' did not help either – Huondui Jul 27 '20 at 17:32
That is script and wont work in html, updated the code snippet above for html – Tejeshree Jul 27 '20 at 17:34
1

That worked, but it was == instead of !=, thank you! – Huondui Jul 27 '20 at 17:38

Check for empty angular object in html

1 Answers1