Question

我的公司有主题要求，并要求我对AngularJs做一些研究。为此，我想展示如何使用Angular来实现我们的主题。

到目前为止我所拥有的Here is a plunk。

这是我所拥有的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等感到迷失......

谢谢，杜安

Answer 1

因为，您希望指令与表单状态交互，所以您需要在指令中使用表单控制器。您可以使用

执行此操作

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

require告诉Angular您的指令取决于表单，因此Angular向上移动DOM，直到找到form，当它找到form时，它会通过指令的控制器，你可以像这样接收控制器。

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

此处formController指的是表单的控制器。

现在，对于您的上一个查询，假设您有一个类型定义为employeeID的输入框，并且有一些自定义规则和杂耍，您可以得出结论输入错误。要通知Angular此输入有误，可以使用formController的$setValidity方法。

语法类似于

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

其中controlName是控件的名称，str是验证失败的字段，值将为true或false，具体取决于您的验证状态。

根据您的验证状态和密钥，Angular会将fallowing类应用于元素。例如，如果你的empId和input中的键无效，那么元素的in class属性就可以看到。

class = "ng-invalid-empId"

如果它是有效的，你使用formController告诉angular。

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

你会有这样的事情。

class="ng-valid-empId"

AngularJs指令简化表单输入

1 个答案: