Problems with ng-required and ng-disable

Question

Problems with ng-required and ng-disable

I have a web application, where a person can enter their skills but if there is a bug that allows them to enter blank skills, then I am trying to use ng-required in input and ng-disable in my button so that this does not occur, but it is not working.

View

Works as follows, when I click the add my Button Controller generates a new input and then just write the skill and then save.

View code

<div class="panel-body">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group" ng-repeat="item in habilidades">
        <div class="input-group">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button" ng-click="removeHabilidade(item)">
              <i class="fa fa-trash-o"></i>
            </button>
          </span>
          <form name="form">
          <input class="form-control" type="text" ng-required="true" ng-model="item.nome">
        </form>
        </div>
      </div>

      <button type="button" class="btn btn-link" ng-click="addHabilidade()">
        <i class="fa fa-plus"></i>
        Adicionar
      </button>
    </div>
  </div>
</div>

Function code addHabilidade

$scope.addHabilidade = function() {
  $scope.habilidades.push({ nome: '' });
};

So far okay, the problem happens when I put the ng-disable On The Save button.

Save Button

<div class="panel-footer">
  <button class="btn btn-default" ng-click="salvarHabilidades()" ng-show="!savingHabilidades" ng-disabled="form.$invalid">
    <i class="fa fa-save"></i>
    Salvar
  </button>

It is as if the value of ng-required is not being passed to the Save button, only being in div of inputs.

Must be some problem with scope or something, because if I I put the ng-required="form.$invalid" on the Delete button (trash cans) works, get disabled.

1

javascript angularjs scope aplicação-web angularjs-scope

Author: stderr, 2016-03-03

Source

1 answers

score 2 · Answer 1

The solution you are looking for goes through the correct use of the ngForm directive.

It is exactly for you to isolate the scope of each form and disable the Save button for each input individually.

For example in the code below:

<div ng-repeat="item in habilidades">
    <ng-form name="itemForm">
          <input type="text" name="nomeItem" ng-model="item.nome" required>
          <button ng-disabled="[CONDIÇÃO PARA DESABILITAR]">
              Salvar
          </button>
    <ng-form>
</div>

Where is condition to disable you can use multiple expressions, such as:

!itemForm.$valid
itemForm.$invalid

Where itemForm is the name property of ng-form, that is, you thus check all validations of all inputs of the form (in this particular case it is only the required of a input).

Or you can check the validity of a specific input like this:

!itemForm.nomeItem.$valid
itemForm.nomeItem.$invalid

Where nomeItem is the name property of the input within the Form itemForm.

If there are still any questions, you can search for form validations in these links:

Https://docs.angularjs.org/api/ng/directive/ngForm
https://docs.angularjs.org/api/ng/type/form.FormController