2016-12-27 98 views
1

我有一個字段,我希望將其作爲表單提交的必填字段。必填表格中的自動完成輸入字段

這裏是代碼:

<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> 
+0

怎麼樣必需的屬性? –

+0

謝謝,我也用@ user7326764沒用 – Shiva

+0

先把這段代碼放到「form」標籤,然後用ng-required =「true」 –

回答

0

試試這個工作演示:

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>

+0

@Rohith Jindal.Thanks not working – Shiva

+0

當我在plunker中使用相同的東西時,默認情況下會顯示錯誤消息@Roht Jindal – Shiva

+0

但是在這裏工作正常,您可以檢查'代碼段「。它按照你的期望工作。 –

0

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

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

+0

沒有使用這個我已經申請 – Shiva

0

看看ngRequired

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

謝謝@chrki。不工作 – Shiva

0

使用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> 
+0

不工作@sai – Shiva

+0

你到底想幹什麼? – SaiUnique

+0

用戶必須輸入該字段,如果忘記輸入時用戶點擊提交表單將不會創建@Sai – Shiva

0

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

<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

+0

thanks.Already我的提交按鈕處於無效階段 – Shiva

+0

然後是什麼問題? –

+0

沒有在該領域輸入任何東西,我可以提交表單@Manuel Obregozo – Shiva