如何在Angular JS中单击按钮的必填字段中验证空白文本框

Question

任何人都可以告诉我如何在需要调用Web服务调用后确认如何在angular js中单击按钮中的必填字段来验证空文本框。有人可以告诉如何实现吗？

Answer 1

您可以使用“必需”属性来确保他们在字段中输入值

<input type="text" name="userName" ng-model="user.name" required>

对于服务调用，您可以使用javascript方法onClick，例如：

<button type="button" class="button" name="Search" id="searchButton" ng-click="getUserInfo()">Search</button>

然后在Angular模块中执行ajax调用

$scope.getUserInfo = function() 
{
    if ($scope.fetchData)
    {
        var data = {
                func: "USERINFO",
                searchUserId: $('#searchUserId').val()
        };
        $http({method:'POST',
               url:'/MYAPP/getuser',
               data: $.param(data),
               headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
        .success(function(data, status, header, config) {
            $scope.users = data;
        })
        .error(function(data,status, headers, config)  {
            alert('Error getting user infos ');
        })      
    }   
}

这是一个简单的例子。 / MYAPP / getuser映射到REST服务，该服务以JSON格式返回数据。 成功（函数）是成功执行调用并返回数据时执行的操作。 您可以将返回的数据绑定到角度表或控件以进行显示。

如果调用失败，将执行.error

至于REST服务，您可以用JAVA或C＃或任何您喜欢的语言编写它，只要它返回JSON。

Answer 2

用这个：

<form name="yourForm">
    <input name="name" ng-model="model.name" type="text" required />
    <div ng-messages="yourForm.name.$error">
        <div ng-message="required">Name is required!</div>
    </div>
    <button ng-click="send()">Send</button>
</form>

在控制器js中：

$scope.send = function () {
    if ($scope.yourForm.$valid) {

        // TODO: send model to server

    }
}

不要忘记：

在您的应用程序中包括Angular ngMessages模块。

祝好运