如何正式引用AngularJS创建的表单域

Question

我使用 Formly 在 angularJS

中创建表单

这是我的田地

$scope.postFields = [
    {
        key: 'title',
        type: 'input',
        templateOptions: {
            label: "Title",
            // required: true,
            minlength: 2,
        },
        validation: {
            messages: {
                required: function(viewValue, modelValue, scope) {
                    return scope.to.label + ' is required'
                }
            }
        }
    }
]

并且我正在尝试按如下方式访问我的字段

    function failure(response) {
    console.log("failure", response)

    _.each(response.data, function(errors, key) {
        _.each(errors, function(e) {
            $scope.form[key].$dirty = true;
            $scope.form[key].$setValidity(e, false);
        });
    });
}

我的表格

<formly-form form="postForm" model="model" fields="postFields" class="col-md-4">
    <button type="submit" class="btn btn-primary" ng-click="addPost()">Submit</button>
</formly-form>

但我当然会收到此错误：

TypeError: Cannot read property 'title' of undefined

在这条线上

$scope.form[key].$dirty = true;

你们中有人知道如何以正确的方式引用创建的表单字段吗？

Answer 1

如果您希望能够引用表单中的字段，您可以为您的字段提供一个 name 属性。 name 是默认生成的。这是 angular-formly 提供的好东西之一（您不必考虑它）。但是如果你想直接用一个特定的 key 来引用它（就像你一样）那么你最好自己提供一个。

所以你会这样做：

$scope.postFields = [
    {
        key: 'title',
        name: 'title',
        type: 'input',
        templateOptions: {
            label: "Title",
            // required: true,
            minlength: 2,
        },
        validation: {
            messages: {
                required: function(viewValue, modelValue, scope) {
                    return scope.to.label + ' is required'
                }
            }
        }
    }
]

或者，您可以像这样创建 fieldTransform to do this automatically (just assign the name the same as the key). Or in your error handler, you could look up the NgModelController from the field's formControl 属性：

function handleError(fields, response) {
  _.each(fields, function(field) {
    if (response.data[field.key]) {
      field.formControl.$setDirty()
      _.each(response.data[field.key], function(e) {
        field.formControl.$setValidity(e, false)
      })
    }
  })
}

这可能是最好的解决方案:-)祝你好运！

如何正式引用AngularJS创建的表单域

How to reference form field created by AngularJS formly

javascript

angularjs

angular-formly