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指令简化表单输入

回答

相关问题