[AngularJS] Como verificar se a inputbox está vazia quando entra no site?

Front-end JavaScript
,
#1

Estou com umas dúvidas, e gostaria de saber como posso fazer com que o site ao ser aberto verifique que a input está vazia e bloqueia o botão de submit ou então que faça aparecer uma mensagem… essa é minha input:

<input type="text" placeholder="Título" name="titulonoticia" 
       id="titulo" ng-model="titulonoticia" required>
#2
  • Qual é a versão do seu AngularJS?
  • No momento de iniciar o seu componente ou código angular no final de tudo se poderia colocar uma função para isso?
  • Basicamente, exemplo:
<input type="text" placeholder="Título" name="titulonoticia" 
       id="titulo" ng-model="titulonoticia" required>
<button ng-disabled="!titulonoticia || titulonoticia.length==0"></button>

Inserir assim (se for angular 1):

ng-disabled="titulonoticia.length==0"
#3

Olá obrigado pela resposta sou novo nisto, sim é a versão 1.

<script> src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>

Tenho uma dúvida… Esse código é pra ser colocado na inputbox ou no botão? É que eu queria que o botão ficasse bloqueado até que tivesse texto e aí ele desbloqueava sozinho…

#4

se puder me ajudar agradecia bastante mesmo!

#5

Exemplo Online

Javascript Angular

var app = angular.module('app',[]);
app.controller('ctrl', function($scope){
  $scope.titulonoticia = '';
  $scope.statusTituloNoticia = function() {
  	return !$scope.titulonoticia || 
    	$scope.titulonoticia.length==0;
  }
  $scope.statusLabelBtn = function() {
  	return $scope.statusTituloNoticia()
    	? 'Desabilitado'
        : 'Habilitado';      
  }
});

Html

<div ng-app="app" ng-controller="ctrl">
<input type="text" placeholder="Título" name="titulonoticia" 
       id="titulo" ng-model="titulonoticia" required>
<button ng-disabled="statusTituloNoticia()">{{statusLabelBtn()}}</button>
</div>
#6

image
O que significa isso?

#7

Isso não tem nada a ver com a pergunta inicial, isso é um erro no projeto.

#8

Eu apaguei isso daqui: {{statusLabelBtn()}} e apareceu o site mas não funciona…

#9

você viu um exemplo agora tente entender o exemplo e reflita no seu código.

#10

Ok, pode só me explicar uma última coisa? por favor?

Isso daqui tá correto?

Javascript:

var app = angular.module('noticia', []);
app.controller('controller', function($scope, $http) {
  $scope.titulonoticia = '';
  $scope.statusTituloNoticia = function() {
  	return !$scope.titulonoticia || 
    	$scope.titulonoticia.length==0;
  }
  $scope.statusLabelBtn = function() {
  	return $scope.statusTituloNoticia()
    	? 'Desabilitado'
      : 'Habilitado';      
  }

<input type="text" placeholder="Título" name="titulonoticia" id="titulo" ng-model="titulonoticia" required>
<button ng-disabled="statusTituloNoticia()">{{statusLabelBtn()}}</button>
#11

Mano… eu acho que não estou fazendo nada errado cara… eu literalmente copiei do seu código e dá aquele erro do Slim Application…

image
image.png864×396 18 KB

#12

Esquece já tá funcionando… mas isso daqui não funciona {{statusLabelBtn()}}

#13

Verifique no debug no navegador qual é o erro agora, pressione tecla F12

#14

Uma outra dica, quando fizer a pergunta coloque também o código

Obrigado

#15

Ok, muito obrigado, ajudou bastante!
Só mais uma coisa… é normal a combobox ficar assim com esse 1 value branco?
image

O Código da combobox é esse:

<p>Tipo de Noticias

<select ng-model="tiponoticia" id="tipos">

<option value="1"&gt;Baixo&lt;/option>

<option value="2"&gt;Médio&lt;/option>

<option value="3"&gt;Alto&lt;/option>

</select>

<p>

Se puder me ajudar só com isso agradecia também, se não puder tudo bem.

#16

Outra Dica: Quando for outra duvida abra outra pergunta!

No seu controller coloque assim

$scope.tiponoticia=1;

ou seja, coloque um código padrão para lista selecionar

#17

Valeu muito amigo, muito obrigado pela sua ajuda. Não irá voltar a acontecer. Obrigado mesmo!

#18

Se pode fazer qualquer pergunta, mas tenha foco nela, se precisar tirar outra duvida faça outra pergunta, uma pergunta para um resposta …

Só estou te ajudando a entender o jeito do site e quando postar pergunta seja pleno, fale sobre o problema e passe o código isso ajuda a resolver o seu problema e ajuda a comunidade.

Obrigado, volte sempre