亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

directory search
AngularJS API Reference auto auto/service auto/service/$injector auto/service/$provide ng ng/directive ng/directive/a ng/directive/form ng/directive/input ng/directive/input[checkbox] ng/directive/input[date] ng/directive/input[dateTimeLocal] ng/directive/input[email] ng/directive/input[month] ng/directive/input[number] ng/directive/input[radio] ng/directive/input[text] ng/directive/input[time] ng/directive/input[url] ng/directive/input[week] ng/directive/ngApp ng/directive/ngBind ng/directive/ngBindHtml ng/directive/ngBindTemplate ng/directive/ngBlur ng/directive/ngChange ng/directive/ngChecked ng/directive/ngClass ng/directive/ngClassEven ng/directive/ngClassOdd ng/directive/ngClick ng/directive/ngCloak ng/directive/ngController ng/directive/ngCopy ng/directive/ngCsp ng/directive/ngCut ng/directive/ngDblclick ng/directive/ngDisabled ng/directive/ngFocus ng/directive/ngForm ng/directive/ngHide ng/directive/ngHref ng/directive/ngIf ng/directive/ngInclude ng/directive/ngInit ng/directive/ngKeydown ng/directive/ngKeypress ng/directive/ngKeyup ng/directive/ngList ng/directive/ngModel ng/directive/ngModelOptions ng/directive/ngMousedown ng/directive/ngMouseenter ng/directive/ngMouseleave ng/directive/ngMousemove ng/directive/ngMouseover ng/directive/ngMouseup ng/directive/ngNonBindable ng/directive/ngOpen ng/directive/ngPaste ng/directive/ngPluralize ng/directive/ngReadonly ng/directive/ngRepeat ng/directive/ngSelected ng/directive/ngShow ng/directive/ngSrc ng/directive/ngSrcset ng/directive/ngStyle ng/directive/ngSubmit ng/directive/ngSwitch ng/directive/ngTransclude ng/directive/ngValue ng/directive/script ng/directive/select ng/directive/textarea ng/filter ng/filter/currency ng/filter/date ng/filter/filter ng/filter/json ng/filter/limitTo ng/filter/lowercase ng/filter/number ng/filter/orderBy ng/filter/uppercase ng/function ng/function/angular.bind ng/function/angular.bootstrap ng/function/angular.copy ng/function/angular.element ng/function/angular.equals ng/function/angular.extend ng/function/angular.forEach ng/function/angular.fromJson ng/function/angular.identity ng/function/angular.injector ng/function/angular.isArray ng/function/angular.isDate ng/function/angular.isDefined ng/function/angular.isElement ng/function/angular.isFunction ng/function/angular.isNumber ng/function/angular.isObject ng/function/angular.isString ng/function/angular.isUndefined ng/function/angular.lowercase ng/function/angular.module ng/function/angular.noop ng/function/angular.toJson ng/function/angular.uppercase ng/object ng/object/angular.version ng/provider ng/provider/$animateProvider ng/provider/$compileProvider ng/provider/$controllerProvider ng/provider/$filterProvider ng/provider/$httpProvider ng/provider/$interpolateProvider ng/provider/$locationProvider ng/provider/$logProvider ng/provider/$parseProvider ng/provider/$rootScopeProvider ng/provider/$sceDelegateProvider ng/provider/$sceProvider ng/service ng/service/$anchorScroll ng/service/$animate ng/service/$cacheFactory ng/service/$compile ng/service/$controller ng/service/$document ng/service/$exceptionHandler ng/service/$filter ng/service/$http ng/service/$httpBackend ng/service/$interpolate ng/service/$interval ng/service/$locale ng/service/$location ng/service/$log ng/service/$parse ng/service/$q ng/service/$rootElement ng/service/$rootScope ng/service/$sce ng/service/$sceDelegate ng/service/$templateCache ng/service/$timeout ng/service/$window ng/type ng/type/$cacheFactory.Cache ng/type/$compile.directive.Attributes ng/type/$rootScope.Scope ng/type/angular.Module ng/type/form.FormController ng/type/ngModel.NgModelController ngAnimate ngAnimate/provider ngAnimate/provider/$animateProvider ngAnimate/service ngAnimate/service/$animate ngCookies ngCookies/service ngCookies/service/$cookies ngCookies/service/$cookieStore ngMessages ngMessages/directive ngMessages/directive/ngMessage ngMessages/directive/ngMessages ngMock ngMock/function ngMock/function/angular.mock.dump ngMock/function/angular.mock.inject ngMock/function/angular.mock.module ngMock/object ngMock/object/angular.mock ngMock/provider ngMock/provider/$exceptionHandlerProvider ngMock/service ngMock/service/$exceptionHandler ngMock/service/$httpBackend ngMock/service/$interval ngMock/service/$log ngMock/service/$timeout ngMock/type ngMock/type/angular.mock.TzDate ngMockE2E ngMockE2E/service ngMockE2E/service/$httpBackend ngResource ngResource/service ngResource/service/$resource ngRoute ngRoute/directive ngRoute/directive/ngView ngRoute/provider ngRoute/provider/$routeProvider ngRoute/service ngRoute/service/$route ngRoute/service/$routeParams ngSanitize ngSanitize/filter ngSanitize/filter/linky ngSanitize/service ngSanitize/service/$sanitize ngTouch ngTouch/directive ngTouch/directive/ngClick ngTouch/directive/ngSwipeLeft ngTouch/directive/ngSwipeRight ngTouch/service ngTouch/service/$swipe
characters

AngularJS: API: ng/directive/form

form

  1. - directive in module ng

指令會(huì)實(shí)例化 FormController。

如果聲明了 name 屬性，表單控制器會(huì)被發(fā)布到name對(duì)應(yīng)的作用域下。

別名: ngForm

Angular中的表單能夠嵌套。 意思是當(dāng)所有子表單有效時(shí)外部表單也會(huì)有效。然而，瀏覽器不允許 <form> 元素嵌套，所以Angular提供了 ngForm 指令來實(shí)現(xiàn) <form> 相同的行為，并能進(jìn)行嵌套。嵌套表單讓你在使用 ngRepeat 指令動(dòng)態(tài)生成的表單上使用Angula的校驗(yàn)指令時(shí)更方便。在此以前，由于使用修改方式不能動(dòng)態(tài)生成輸入元素的 name 屬性，你必須使用 ngForm 指令包裹重復(fù)生成的集合中的每個(gè)輸入對(duì)象，再在外部嵌套 form元素。

CSS類

  • ng-valid 表單通過驗(yàn)證時(shí)設(shè)置
  • ng-invalid 表單未通過驗(yàn)證時(shí)設(shè)置
  • ng-pristine 表單沒有改動(dòng)時(shí)設(shè)置
  • ng-dirty 表單有改動(dòng)時(shí)設(shè)置

記住 ngAnimate 能偵測這些類中每個(gè)的添加和刪除。

提交一個(gè)表單并防止默認(rèn)動(dòng)作

在富客戶端式Angular應(yīng)用中的表單身份不同于在以往的循環(huán)鏈?zhǔn)綉?yīng)用中的身份。為防止瀏覽器在發(fā)送數(shù)據(jù)到服務(wù)器時(shí)不會(huì)由于表單提交引起整個(gè)頁面重載，所以在應(yīng)用中通過特殊手段觸發(fā)javascript邏輯來處理表單提交。

為此，Angular防止默認(rèn)操作（表單提交到服務(wù)器），除非 <form> 元素指定了 action 屬性.

你可以使用以下兩種方法之一來指定表單提交時(shí)要調(diào)用的javascript方法：

  • form元素上的ngSubmit 指令
  • 第一個(gè)按鈕或類型為submit的input字段(input[type=submit])上的ngClick 指令

為了防止處理程序的雙重執(zhí)行，你只能使用 ngSubmit 或 ngClick 指令的其中一個(gè)。這是因?yàn)镠TML規(guī)范有以下表單提交規(guī)則:

  • 如果表單只有一個(gè)input字段，在這個(gè)字段按回車將觸發(fā)表單提交(ngSubmit)
  • 如果表單有兩個(gè)以上input字段并且沒有按鈕或沒有input[type=submit] ,按回車不會(huì)觸發(fā)提交
  • 如果表單有一個(gè)或多個(gè)input字段，并且有一個(gè)或多個(gè)按鈕，或有input[type=submit]，在任意input字段中按回車后將觸發(fā) 第一個(gè) 按鈕或 input[type=submit]上的click事件 (ngClick) 和 整個(gè)表單的submit事件 (ngSubmit)

當(dāng)整個(gè)表單提交時(shí)，任何掛起的 ngModelOptions 更改將立即生效。注意， ngClick 事件將在模型被更新前觸發(fā)?？梢允褂?ngSubmit訪問更新的模型。

指令信息

  • 這個(gè)指令執(zhí)行優(yōu)先級(jí)為0.

用法

  • 作為元素使用: 
    <form
  [name=""]>
...
</form>

參數(shù)

參數(shù) 類型 詳述
name
(可選)
 string

表單名稱。如果指定，表單控制器將被發(fā)布到這個(gè)名字下相關(guān)的域范圍中。

動(dòng)畫鉤子

ngForm中的動(dòng)畫將在任何級(jí)聯(lián)CSS類被添加或刪除時(shí)觸發(fā)。這此類有: .ng-pristine, .ng-dirty, .ng-invalid 和 .ng-valid ，以及表單執(zhí)行的任何其他驗(yàn)證。ngForm中的動(dòng)畫類似ngClass中的工作方式，并且動(dòng)畫可以掛在 CSS 過渡、關(guān)鍵幀、JS動(dòng)畫上。

下面的例子簡單的演示了一個(gè)利用 CSS 樣式過渡來渲染一個(gè)驗(yàn)證時(shí)未通過驗(yàn)證的表單元素:

//be sure to include ngAnimate as a module to hook into more
//advanced animations
.my-form {
  transition:0.5s linear all;
  background: white;
}
.my-form.ng-invalid {
  background: red;
  color:white;
}

示例

index.html 
<script>
  angular.module('formExample', [])
    .controller('FormController', ['$scope', Function($scope) {
      $scope.userType = 'guest';
    }]);
</script>
<style>
 .my-form {
   -webkit-transition:all linear 0.5s;
   transition:all linear 0.5s;
   background: transparent;
 }
 .my-form.ng-invalid {
   background: red;
 }
</style>
<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
  <tt>userType = {{userType}}</tt><br>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
 </form>
protractor.js
it('should initialize to model', Function() {
  var userType = element(by.binding('userType'));
  var valid = element(by.binding('myForm.input.$valid'));

  expect(userType.getText()).toContain('guest');
  expect(valid.getText()).toContain('true');});

it('should be invalid if empty', Function() {
  var userType = element(by.binding('userType'));
  var valid = element(by.binding('myForm.input.$valid'));
  var userInput = element(by.model('userType'));

  userInput.clear();
  userInput.sendKeys('');

  expect(userType.getText()).toEqual('userType =');
  expect(valid.getText()).toContain('false');});
Previous article： Next article：