Problems with ng-required and ng-disable

Asked

Viewed 1,245 times

1

I have a web application, where a person can enter their skills but if there’s a bug that allows them to enter blank skills, then I’m trying to use the ng-required in the input and the ng-disable on my button so it doesn’t happen, but it’s not working.

View

inserir a descrição da imagem aqui

It works like this, when I click on the add button mine 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 so good, 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’s like the value of ng-required wasn’t being passed to the save button, just staying in the div of inputs.

Must be some problem with Scope or something, because if I put the ng-required="form.$invalid" on delete button(recycle bin) works, they are disabled.

javascript angularjs web-application angularjs-scope scope

  • I didn’t quite understand, that would be: http://jsfiddle.net/sinkz/Lvc0u55v/659/ ?

  • Yes, the goal is that, but it’s not running ng-disable. It seems the value of $invalid being passed when ng-required for false is not reaching ng-disable from the Save button

  • What the name of your form?

  • The name of my FORM is " form ". A very generic name

  • when there is only 1 works? When it generates more than 1 they must be getting the same name. You already debugged to see the value that is in the form. $invalid? puts "{form. $invalid}}" in your html and see how it looks

1 answer

2

The solution you seek is the correct use of the directive ngForm.

It serves exactly for you to isolate the scope of each form and disable the save button of 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 property name of ng-form, that is, you thus check all the validations of all the inputs of the form (in this case in particular required of a input).

Or it is possible to verify the validity of a input specific thus:

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

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

If there is still any doubt, 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

Browser other questions tagged javascript angularjs web-application angularjs-scope scope

You are not signed in. Login or sign up in order to post.