Criando component com Angular

Front-end
#1

Fala galera blz,
Estou criando um component com angularjs 1.5 e não estou conseguindo capturar o valor do component ao submeter o formulário, alguém poderia me ajudar? Meu código está meio bagunçado de tantos testes hehehehe
Segue o código:

component input

(function(angular) {
    'use strict';
    
    function GaxInputController() {}
    
    angular.module('gaxApp').component('gaxInput', {
        templateUrl: '/gaxfornecedores/views/components/gaxInput.html',
        controller: GaxInputController,
        bindings: {
            input: '='
        }
    });
})(window.angular);

html do component

<input id="{{$ctrl.input.id}}" name="{{$ctrl.input.name}}"
        class="{{$ctrl.input.required == true ? 'form-control required' : 'form-control'}}" type="text"
        style="width:{{$ctrl.input.width}}" required="{{$ctrl.input.required == true ? true : false}}"/>

chamada do component

(function(angular) {
    'use strict';
    
    angular.module('gaxApp', []).controller('loginCtrl', function($scope) {
        this.input = {
            id: 'login',
            name: 'login',
            required: true,
            width: '170px'
        };
        
        this.password = {
            id: 'senha',
            name: 'senha',
            required: true,
            width: '170px'
        };
        
        this.button = {
            id: 'submit_logar',
            name: 'submit_logar',
            custom: 'margin-top: 20px;',
            value: 'Entrar'
        };
        
        $scope.entrar = function(isValid) {
            if (!isValid) {
                $scope.$broadcast('show-errors-check-validity', 'formPrincipal');
                return false;
            }
        };
    });
})(window.angular);

html para utilizar o component

<form id="formPrincipal" name="formPrincipal" ng-submit="entrar(formPrincipal.$valid)" novalidate>
    <fieldset style="border:none; margin-left: 70px; margin-top: 50px;">
        <legend>ACESSO AO SISTEMA</legend>
        
        <p>
            <label for="username" style="color: #FFFFFF; font-size: 10pt;">Usuário</label>
            <br />
            <gax-input input="ctrl.input"></gax-input>
            <span class="text-danger field-validation-error" ng-show="(formPrincipal.login.$dirty && formPrincipal.login.$invalid) || (formPrincipal.$submitted || formPrincipal.login.$touched)">
            <span ng-show="formPrincipal.login.$error.required">Campo obrigatório.</span>
            </span>
        </p>
        
        <p>
            <label for="password" style="color: #FFFFFF; font-size: 10pt;">Senha</label>
            <br />
            <!--gax-password password="ctrl.password"></gax-password>
            <span class="text-danger field-validation-error" ng-show="(formPrincipal.senha.$dirty && formPrincipal.senha.$invalid) || (formPrincipal.$submitted || formPrincipal.senha.$touched)">
            <span ng-show="formPrincipal.senha.$error.required">Campo obrigatório.</span>
            </span-->
        </p>
        
        <p></p>
        
        <p>
            <gax-button button="ctrl.button"></gax-button>
        </p>
    </fieldset>
</form>
#2

Tá estranho, pois creio que o template do seu componente deve ter o ng-model. Através do ng-model que o valor será atualizado no controller.

#3

Opa, na real tem na hora de copiar eu esqueci de por de volta então está assim

<input id="{{$ctrl.input.id}}" name="{{$ctrl.input.name}}"
        class="{{$ctrl.input.required == true ? 'form-control required' : 'form-control'}}" type="text"
        style="width:{{$ctrl.input.width}}" ng-model="$ctrl.input.model" required="{{$ctrl.input.required == true ? true : false}}"/>

Só se eu colocar o $ctrl.input.model eu preciso setar mais um atributo no .component para que eu possa pega-lo no controller, mais como irei diferenciar os ng-models se eu tiver dois components instanciados na mesma página?

#4

Na tela onde o componente será utilizado, você terá que passar a variável do controller que irá receber o valor. Dentro do componente, nos bindings, você terá que referenciar o atributo do controler (que irá receber a tal variável) com “=” (que significa que o binding será bidirecional). Feito isso, ao alterar o valor do campo, a variável do controller da tela será automaticamente alterada.

1 curtida
#5

Era exatamente isso, vlw