AngularJs指令簡化表單輸入

我的公司有主題要求，並要求我對AngularJs進行一些研究。爲此，我想演示如何使用Angular來實現我們的主題。AngularJs指令簡化表單輸入

這裏是我所擁有的HTML的偉大工程。

<form name="frmLogin" ng-submit="submit()" novalidate> 
    <div class="form-field" data-ng-class="{'error': frmLogin.txtLastName.$invalid && frmLogin.txtLastName.$dirty && !frmLogin.txtLastName.$focused}"> 
    <label for="txtLastName" class="required">Email</label> 
    <input id="txtLastName" name="txtLastName" type="text" data-ng-model="user.lastName" required autofocus ng-focus /> 
    <div class="inline-validation" data-ng-show="frmLogin.txtLastName.$invalid && frmLogin.txtLastName.$dirty && !frmLogin.txtLastName.$focused"> 
     {{getError(frmLogin.txtLastName.$error, 
     { 
      required: "LastName is required" 
     } 
    )}} 
    </div> 
    </div>  
</form>

我正在致力於爲開發人員簡化HTML的指令。

這是我的想法。

<form name="frmUserName" novalidate> 
    <ff-text-input control-name="txtFirstName" control-label="First Name" ng-model="user.userEmail"></ff-text-input> 
</form>

作爲新手，我正在努力處理這個指令。

我不知道如何抓住整個frmLogin.txtLastName.$invalid && frmLogin.txtLastName.$dirty && !frmLogin.txtLastName.$focused，所以開發人員不必這樣做。

我能夠通過使用ctrl.$name + "." + scope.controlName來確定窗體名稱和控件的名稱，但我失去了對如何應用到$invalid等等

感謝，杜安

來源

2014-06-22 Duane Haworth

只需將html粘貼到模板中，然後添加屬性，您將傳遞表單名稱或使用jQuery：var formName = element.closest（'form'）。attr（'name'）;'當你'將有形式的名稱，你應該能夠使用'formName [attr.controlName]。$ invalid' – jcubic

感謝您的快速回復。我的鏈接函數中沒有ctrl參數的形式嗎？我一直在想我應該可以做'console.log（ctrl [controlName]）;'但我一直未定義。我可以通過'var formName = ctrl。$ name'獲取表單名稱，'var controlName = scope.controlName'獲取controlName，但是當我把它們放在一起時，我會得到'undefined'。 –

以來，你希望你的指令與表單狀態交互，你需要在你的指令中有一個表單控制器。您可以

app.directive('inputValidate', function(){ 
      return { 
       restrict: 'A', 
       scope: true, 
       require: '^form',

的require告訴角度，你的指令取決於窗體上做到這一點，所以角向上移動DOM，直到找到一個form，當它找到一個form，它通過一個控制器該指令，你可以像這樣接收該控制器。

link: function(scope, element, attrs, formController){

這裏formController指形式的控制器。

現在，對於您的最後一個查詢，假設您有一個輸入框，其類型定義爲employeeID，並帶有一些自定義規則和雜耍，則可以得出輸入錯誤的結論。爲了告訴Angular這個輸入是錯誤的，你可以使用formController的$setValidity方法。

語法如下

formController[controlName].$setValidity(str, value);

其中controlName是控件的名稱，str是針對驗證失敗的字段和值是true或false，這取決於您的驗證狀態。

根據您的驗證狀態和密鑰，Angular會將休閒類應用於元素。例如，如果您在empId中的鍵和輸入無效，則元素的in class屬性中可以看到這一點。

class = "ng-invalid-empId"

而且，如果它是有效的，並且你已經用formController告訴了角。

formController[controlName].$setValidity('empId', true);

你會有這樣的事情。

class="ng-valid-empId"

來源

2014-06-23 05:24:10 Paras

AngularJs指令簡化表單輸入

回答

相關問題