Disabling igx-button when validation fails

Question

In an Angular application, I've a dialog that's shown when the user clicks on a button and it's defined as

<igx-dialog #dialogAdd title="Nuovo Tipo Oggetto" [rightButtonLabel]="'Inserisci'" [leftButtonLabel]="'Cancella'" (leftButtonSelect)="cancel()" (rightButtonSelect)="addRow()">
  <div class="dialogNewRecord">
    <app-tipi-oggetto-insert ></app-tipi-oggetto-insert>
  </div>
</igx-dialog>

The content of app-tipi-oggetto-insert is

<form class="input-group-form" [formGroup]="tipoOggettoInsert" (ngSubmit)="onSubmit()">
    <igx-input-group>
      <label igxLabel for="productName">Tipo</label>-->
      <input igxInput id="productName" type="text" [(ngModel)]="item.tipo" />
    </igx-input-group>
    <igx-input-group>
      <label igxLabel for="unitsInStock">Descrizione</label>
      <input igxInput id="unitsInStock" type="text" [(ngModel)]="item.descrizione" />
    </igx-input-group>
</form>

I was wondering how can I disable the Submit button at the start and if the validation of the fields fails... I haven't put the validation here for simplicity but the main problem is that I don't know how to tell the main view to disable the button based on internal value. do I have to use an event?

Otherwise, how can I open an igniteUI dialog programmatically? I think of putting the

<igx-dialog #dialogAdd ...

inside the Add Component

Thankss

Disabling igx-button when validation fails

0 Answers0