必填字段Angularjs 1.2和引導程序3

隨着對angularjs和引導程序3的更改，我一直無法創建表單字段，只需在輸入字段中添加所需的參數即可用紅色突出顯示來包圍項目。這是一個plunker與我如何安裝在我的系統上，並希望它工作。我似乎無法在bootstraps網站上找到關於所需的任何文檔，以便在任何人都可以找到時真的有所幫助。必填字段Angularjs 1.2和引導程序3

Plunker

編輯：全部換成下面意見或建議以下...我還是喜歡一個解決方案，我不需要寫任何CSS和使用引導3

我表單域看起來是這樣的：

<body ng-app> 
<div ng-controller="Controller" class="container"> 
    <form novalidate class="simple-form" name="myForm"> 
    <div class="form-group col-sm-4"> 
     Name: <input type="text" ng-model="name" name="name" class="form-control" required/> 
     E-mail: <input type="email" ng-model="email" name="email" class="form-control" required/> 

     <small class="error" 
      ng-show="myForm.email.$error.required"> 
      Your name is required. 
     </small> 

    </div> 
    </form> 
</div> 
</body>

的script.js是這樣的：

function Controller($scope) { 
    $scope.name = "Test"; 
    $scope.email = ""; 
}

米

的style.css看起來是這樣的：

input.ng-invalid { 
    border: 1px solid red; 
}

雖然這個作品它取代了自舉CSS與上面的CSS。我更願意簡單地添加需要的元素，而不必重寫CSS來添加色調和動畫。

來源

2013-10-21 Ty Danielson

你已經做了一些必要的事情，但沒有把它放在一個表格中，當然這是行不通的。 –

添加了一個表單，所以沒有混淆，但沒有任何幫助。看看那個笨蛋，看看我的意思。 –

我同意雙方的其他兩個答案，但想增加更多的

我認爲你的主要問題是Bootstrap 3刪除了基於:invalid和相關僞類的樣式（請參閱here爲什麼）。這是bootstrap 2.x中紅色輪廓的來源。

首先，解決您的plunker你應該：

引導與ng-app麥克您的應用程序說
把你輸入的形式novalidate
提供了一個模型來你的輸入與ng-model如此它可以被無效（通過角度，使用類）
在引導之前移動jQuery腳本，因爲它是引導的要求。

現在你已經在正確的類被應用於指示輸入有效性plunker。你還沒有這些樣式，但它們不會依賴於你的瀏覽器的HTML5表單驗證，所以可以在任何角度支持下工作。

要應用樣式，您可以使用直CSS，並將其應用到ng-valid，ng-invalid，ng-invalid-required等類，也可以從this comment使用ng-class建議申請自舉的類時，你需要他們

ng-class="{'has-error': formname.inputname.$invalid}"

如果您已命名您的輸入並將其包裝在控件中。

更新plunker：http://plnkr.co/edit/mE3dkG?p=preview

編輯

我在做一個指令，這個也有一展身手。這可能是矯枉過正，但這個應該工作，無論你有一個form-group類，並添加一個ng-form同一元素

.directive('formGroup', function(){ 
    return { 
    restrict: 'C', 
    require: '?form', 
    link: function(scope, element, attrs, formController){ 
     if(!formController) 
     return; 
     scope.$watch(function(){ 
     return formController.$valid; 
     }, function(valid) { 
     if(valid) 
      element.removeClass('has-error'); 
     else 
      element.addClass('has-error'); 
     }); 
    } 
    }; 
});

另一個plunker：http://plnkr.co/edit/UQjRrA?p=preview

*電子郵件將不再有效，除非它看起來像一封電子郵件

來源

2013-10-21 23:03:12 Andyrooger

http://plnkr.co/edit/FJEcMg?p=preview - 新推杆的更新版本 – Andyrooger

非常完美，我正在尋找。 –

你有幾件事在這裏失蹤。首先，爲了使表單字段來驗證它需要一個獨特的名字：

<input class="form-control" type="text" name="test" required/>

其次，爲了禁止股票HTML5驗證，你需要一個novalidate屬性添加到窗體：

<form class="form-horizontal" name="myForm" role="form" novalidate>

第三，也是最重要的一點，你的例子沒有與它相關的應用程序或控制器，所以角度完全忽略它。那個你必須解決你自己。

瞭解更多關於角的形式在這裏：http://docs.angularjs.org/guide/forms

來源

2013-10-21 22:25:23

我建議你一步這個優秀的一步：http://www.ng-newsletter.com/posts/validations.html

來源

2013-10-21 22:26:07 Shipow

必填字段Angularjs 1.2和引導程序3

回答

相關問題