Enable and disable required Angular JS

Question

im doing a form using Angular JS and i need to deactivate a few inputs in a onchange event of a option select.

If i choose certain option i have to deactivate like 4 inputs, and by doing this im not able to sumbit the form until i write something on the inputs, so how i can deactivate those inputs and remove the required option of the inputs? in order to sumbit the remain info on the form without asking me for the deactivate inputs.

Thanks.

<?php 
    $consultar = new Consultar();
    $result    = $consultar->_ConsultartiposProcesosCobranza();
    $num_rows  = pg_num_rows($result);

    //Consultar OS
    $resOs     = $consultar->_ConsultarOS();
    $num_os    = pg_num_rows($resOs);

    //Consultar Tipo Servidor
    $resServidor = $consultar->_ConsultarTipoServidor();
    $num_servidor = pg_num_rows($resServidor);
?>

<style>
    .Desc   {margin-right: 12%; margin-top: 3%; text-align: center;}
    .TopMAr {margin-top: 2%;}
</style>

<div class="col-xs-12 col-md-12 FormularioCobranza" data-ng-app="" >
    <h2 class="text-center">Formulario ejecutables Cobranza</h2>
    <div class="col-xs-12 alert alert-success text-center" id="AlertAgregar" style="display:none;"> 
        <label class="text-center">Servidor Agregado</label>
    </div><!-- AlertAgregar-->

    <form id="form" name="form">    


        <div class="col-xs-4" ng-class="{ 'has-success': form.num_servidor.$valid}"> 
            <label>Servidor: </label>
            <input type="text" placeholder="número de Servidor" class="form-control" name="num_servidor" id="num_servidor" 
            required ng-model="usuario.num_servidor" >
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_servidor.$dirty " style="position: absolute;" id="servidor_valid">
                <p class="help-block text-danger" ng-show="form.num_servidor.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-4" ng-class="{ 'has-success': form.num_discoduro.$valid}"> 
            <label>Disco Duro: </label>
            <input type="text" placeholder="Cantidad En GB" class="form-control" name="num_discoduro" id="num_discoduro" 
            required  ng-model="usuario.num_discoduro" >
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_discoduro.$dirty " style="position: absolute;">
                <p class="help-block text-danger" ng-show="form.num_discoduro.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-4" ng-class="{ 'has-success': form.num_ram.$valid}"> 
            <label>Ram: </label>
            <input type="text" placeholder="Cantidad En GB" class="form-control" name="num_ram" id="num_ram" 
            required ng-model="usuario.num_ram" >
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_ram.$dirty " style="position: absolute;">
                <p class="help-block text-danger" ng-show="form.num_ram.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-4 TopMAr" ng-class="{ 'has-success': form.num_discoactual.$valid}"> 
            <label>Disco Duro Usado: </label>
            <input type="text" placeholder="Cantidad En GB" class="form-control" name="num_discoactual" id="num_discoactual" 
            required ng-model="usuario.num_discoactual" >
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_discoactual.$dirty " style="position: absolute;">
                <p class="help-block text-danger" ng-show="form.num_discoactual.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-4 TopMAr" ng-class="{ 'has-success': form.num_ramactual.$valid}"> 
            <label>Ram Usado: </label>
            <input type="text" placeholder="Cantidad En GB" class="form-control" name="num_ramactual" id="num_ramactual" 
            required ng-model="usuario.num_ramactual" >
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_ramactual.$dirty " style="position: absolute;">
                <p class="help-block text-danger" ng-show="form.num_ramactual.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-4 TopMAr" ng-class="{ 'has-success': form.id_os.$valid}"> 
            <label>Sistema Operativo: </label>
            <select class="form-control" id="id_os" name="id_os" required ng-model="usuario.id_os">
                <option value="">Seleccionar...</option>
                <?php 
                    for($i=0; $i<$num_os; $i++)
                    {
                        $filaOs = pg_fetch_array($resOs);
                        $nb_os  = $filaOs['desc_osc'];
                        $id_os  = $filaOs['id'];

                        echo '<option value="'.$id_os.'">'.$nb_os.'</option>';
                    }
                ?>
            </select>
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.id_os.$dirty " style="position: absolute;">
                <p class="help-block text-danger" ng-show="form.id_os.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-4 TopMAr" ng-class="{ 'has-success': form.id_servidor.$valid}"> 
            <label>Tipo: </label>
            <select class="form-control" id="id_servidor" name="id_servidor" required ng-model="usuario.id_servidor" onchange="VerificarTipoServidor(this)">
                <option value="">Seleccionar...</option>
                <?php 
                    for($i=0; $i<$num_servidor; $i++)
                    {
                        $filas       = pg_fetch_array($resServidor);
                        $desc_ser    = $filas['desc_servidor'];
                        $id_servidor = $filas['id'];

                        echo '<option value="'.$id_servidor.'">'.$desc_ser.'</option>';
                    }
                ?>
            </select>
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.id_servidor.$dirty " style="position: absolute;">
                <p class="help-block text-danger" ng-show="form.id_servidor.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-12" style="margin-top:3%">   
            <div class="col-xs-5 pull-right" style="margin-right: 14%;">
                <input type="button" value="Cancelar" id="btn-danger" onclick="Cancelar()" class="btn btn-danger">
                <input type="button" value="Enviar" id="btn-cobranza" onclick="GuardarEjecutable()" class="btn btn-success" ng-disabled="form.$invalid">
                <!--<input type="button" value="Enviar" id="btn-cobranza" ng-click="usuarios(usuario)" class="btn btn-success">-->
            </div>
        </div>
    </form> 
</div><!-- añadir cobranza-->

function VerificarTipoServidor(input) { Option = $(input).find("option:selected").text(); console.log(Option); if(Option=="PBX") { //Desabilitando los inputs $("#num_discoduro").prop("readonly",true); //$("#num_ram").prop("readonly",true); //$("#num_discoactual").prop("readonly",true); //$("#num_ramactual").prop("readonly",true);

        //Pruebas
        $("#num_discoduro").removeAttr("required");
        $("#num_ram").removeAttr("required");
        $("#num_discoactual").removeAttr("required");
        $("#num_ramactual").removeAttr("required");

        $("#num_discoduro").val("200");
        $("#num_ram").val("200");
        $("#num_discoactual").val("200");
        $("#num_ramactual").val("200");

    }//if
    else
    {
        $("#num_discoduro").prop("disabled",false);
        $("#num_ram").prop("disabled",false);
        $("#num_discoactual").prop("disabled",false);
        $("#num_ramactual").prop("disabled",false);
    }//else
}//VerificarTipoServidor

See if this will help [stackoverflow.com/questions/13626517/… [1]: stackoverflow.com/questions/13626517/… — Arthur Hylton
– Arthur Hylton, Commented Jan 5, 2015 at 21:43

Kevin Pei · Accepted Answer · 2015-01-05 21:35:20Z

1

Take a look at ng-required.

https://docs.angularjs.org/api/ng/directive/input

It works as you would expect:

ng-required="myVarible", when myVariable is true, it is required, otherwise it isn't.

answered Jan 5, 2015 at 21:35

Kevin Pei

5,8827 gold badges42 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Enable and disable required Angular JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related