必填表格中的自動完成輸入字段

Question

我有一個字段，我希望將其作爲表單提交的必填字段。

這裏是代碼：

<div class="form-group"> 
    <form name="addressform"> 
     <span><small><strong> choose Location : </small></strong></span> 

     <div> 
      <input type="text" name="address" id="LocationAutocomplete" class="form-control" ng-autocomplete="result1" ng-model="addressTemp" required/> 
</form> 
      <div ng-show="showMap"> 
       <div id="location_map_canvas" style="width:100%;height:200px"> </div> 
      </div> 
     </div> 
    </div> 
    <div class="form-group"> 
        <input type="submit" ng-submit value="create" ng-disabled="frm.$invalid" class="btn btn-primary btn-block" ng-click="createt()"> 
        </div> 

Answer 1

試試這個工作演示：

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.create = function() { 
 
     console.log("submitting.."); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <form name="addressform" ng-submit="addressform.$valid && create()" novalidate> 
 
     <span ng-show="submitted == true && addressform.address.$error.required">Required field.</span> 
 
     <div class="form-group"> 
 
      <input type="text" name="address" id="LocationAutocomplete" class="form-control" ng-autocomplete="result1" ng-model="addressTemp" required/> 
 
     </div> 
 
    <div class="form-group"> 
 
     <input type="submit" value="create" class="btn btn-primary btn-block" ng-click="submitted = true"> 
 
    </div> 
 
</form> 
 
</div>

Answer 2

<input name="movie" type="text" required />

這是你將如何做需要輸入文本字段。

Answer 3

看看ngRequired

<input type="text" id="LocationAutocomplete" class="form-control" ng-autocomplete="result1" ng-model="addressTemp" ng-required="required"/> 

Answer 4

使用ng-required="true"如下：

<input type="text" id="LocationAutocomplete" class="form-control" ng-autocomplete="result1" ng-model="addressTemp" ng-required="true" name="input"/> 

<input type="submit" ng-disabled="myform.input.$error.required">Submit</input> 

Answer 5

使用angularjs表單驗證 https://docs.angularjs.org/guide/forms - https://docs.angularjs.org/api/ng/type/form.FormController與NG-消息（https://docs.angularjs.org/api/ngMessages/directive/ngMessages）

，如果你想要提交（ng-submit =「checkAndSave」）.. 不要在控制器..

$scope.checkAndSave = function(){ 

// validations code if ok do save else throw whatever you want 
} 

Answer 6

添加的表單標籤，並將其命名形式和所有的輸入

<form name="form" ng-submit="submitform()"> 
    <input name="addres" type="text" id="LocationAutocomplete" class="form-control" ng-model="addressTemp" required/> 

    <button type="submit" ng-disabled="form.$invalid"> Submit </button> 
</form> 

有了這個，你將不得不如果輸入是無效的提交按鈕被禁用。 ，因爲它具有必需的屬性，如果輸入爲空，它將顯示爲無效。

找到這個工作示例： https://plnkr.co/edit/F0Id7HDm9pkrCTTG42U5?p=preview