disable continue/next button jquery steps with angular 2

Question

I need to disable the continue button of jquery steps until I meet the exact condition.. ex: without filling username user can not allow to continue(simply disable it).

In angular context how can I do this?

thanks in advance

Answer 1

You should have a look at template driven forms. There are key concepts to master when you're doing Angular 2 development and this is one of them. It will take some time but it's well worth the effort: https://angular.io/docs/ts/latest/guide/forms.html

So based on this, if you were to create a form element that encapsulates all the fields and add the required attribute to the elements that need to be filled (ex: userName), then the button will be disabled if any of the required fields is not filled.

Example input with required attribute:

    <input type="text" class="form-control" id="userName"
           required
           [(ngModel)]="yourModel.yourProperty" name="userName"
           #userName ="ngModel">

Example button inside your form:

<button type="submit" class="btn btn-success">Submit</button>

Alternatively, if you don't want to use forms and you're in a rush right now, you can bind to the button's disabled attribute and execute a method that returns a boolean after checking whether all the required fields are there or not.

<button [disabled]="!isMissingRequiredFields()">Continue</button>

And you should use ngModel bindings for all the input fields that are required and that you'll be checking in isMissingRequiredFields() method so you don't end up doing anything funky like accessing DOM elements from inside your component ts file and getting their innerText etc.