angularjs – 当控制器设置为ng-repeat时,我失去了对表单控制器

发布时间：2020-12-17 17:16:32 所属栏目：安全来源：网络整理

导读：我有使用AngularJS v1.5.0的代码,并使用像这样的ng-repeat创建多个表单.请注意,在表单中我显示了xx和xx之间的表单详细信息： div ng-click="wos.wordFormRowClicked(wf)" ng-form="wos.wordFormNgForm_{{wf.wordFormId}}" ng-repeat="wf in wos.word.wordFor

我有使用AngularJS v1.5.0的代码,并使用像这样的ng-repeat创建多个表单.请注意,在表单中我显示了xx和xx之间的表单详细信息：

<div ng-click="wos.wordFormRowClicked(wf)"
     ng-form="wos.wordFormNgForm_{{wf.wordFormId}}"
     ng-repeat="wf in wos.word.wordForms">

     xx {{ wos['wordFormNgForm_1465657579'] }}  xx

当我能够在xx和xx之间看到表单详细信息的运行时,我能够查询表单的状态,如下所示：

wordFormCheckAndUpdate = (): ng.IPromise<any> => {
    var self = this;
    var wordFormNgForm = 'wordFormNgForm_' + wf.wordFormId;
    self[wordFormNgForm].$setDirty();

但是在调用此过程后的代码中,表单变为未定义,并且xx和xx之间也没有显示任何内容.当我使用调试器逐步执行此过程时,我看到的最后一行是设置a值的行,然后一旦函数完成,xx和xx之间的信息就会消失,并且表单变为未定义：

wordEditSubmit = (): ng.IPromise<any> => {
    var self = this;
    return this.wordFormCheckAndUpdate().then(
        () => {
            return self.$http({
                url: self.ac.dataServer + "/api/word/Put",method: "PUT",data: self.word
            })
                .then(
                (response: ng.IHttpPromiseCallbackArg<IWordRow>): any => {
                    self.word = angular.copy(response.data);
                    self['wordNgForm'].$setPristine();
                    self.uts.remove(self.words,'wordId',self.word.wordId);
                    response.data.current = true;
                    self.words.push(response.data);
                    var a = 99;
                },(error: ng.IHttpPromiseCallbackArg<any>): any => {
                    self.ers.error(error);
                    return self.$q.reject(error);
                });
        }
    );
}

我的问题是,如果我然后尝试重复这个：

setDirty = (): ng.IPromise<any> => {
    var self = this;
    var wordFormNgForm = 'wordFormNgForm_' + wf.wordFormId;
    self[wordFormNgForm].$setDirty();
}

然后不再定义控制器对象self [wordFormNgForm].

以供参考.以下是创建新wordForms的方法：

wordFormAdd = () => {
    this.wordFormId = Math.floor(Date.now() / 1000);
    var emptyWordForm: IWordForm = <IWordForm>{
        wordId: this.word.wordId,wordFormId: this.wordFormId,posId: 1,statusId: Status.New
    };
    this.word.wordForms.push(emptyWordForm);
    this.wordNgForm.$setDirty();
}

这是删除功能：

remove = (arr,property,num) => {
    arr.forEach((elem,index) => {
        if (elem[property] === num)
            arr.splice(index,1);
    })
};

有没有人对如何解决这个问题有任何建议

解决方法

您可以通过重现该问题的演示解释您的问题.尽管如此,我已经部分复制了你的问题 in a fiddle here(虽然不是使用Typescript,它只是vanilla JS).

当你第一次使用wordFormAdd()方法添加一个wordForm对象时,我怀疑会发生这种情况,如果你尝试立即用同一方法引用与ng-form相关联的FormController对象,那么这样做可能为时尚早.,因为$digest循环可能尚未完成.

这是因为只要单击并触发wordFormAdd()函数,就会在word.wordForms数组中添加一个新的emptyWordForm对象,并立即在视图中重复执行.但是,控制器没有足够的时间将新创建的ng-form对象与自身关联起来,因此最终可能会引用未定义的对象.

wordFormAdd = () => {
this.wordFormId = Math.floor(Date.now() / 1000);
    var emptyWordForm: IWordForm = <IWordForm>{
        wordId: this.word.wordId,statusId: Status.New
    };
    this.word.wordForms.push(emptyWordForm);
    this.wordNgForm.$setDirty();  //<== too early to do so
}

要克服这个问题,您应该将代码中的那部分包装在$timeout包装器中.这确保了Angular的所谓脏检查(或简称摘要循环)已完成.

另请注意,保留单个wordNgForm或wordFormId引用没有意义,因为您可以动态添加其他表单,每个表单可能与新的wordNgForm键和wordFormId相关联.

我建议像上面这样做：

wordFormAdd = () => {
    this.wordFormId = Math.floor(Date.now() / 1000);
    ...
    this.word.wordForms.push(emptyWordForm);

    this._timeout(function(){ // $timeout injected and assigned to this._timeout in controller definition
        var wordFormNgForm = 'wordFormNgForm_' + this.wordFormId;
        this[wordFormNgForm].$setDirty();  // <==
    });
}

However in my code after calling this procedure the form becomes undefined and also nothing shows between the xx and xx. As I step through this procedure with the debugger the last line I see is the line setting the value of a and then as soon as the function finishes the information between the xx and xx disappears and the form becomes undefined:

视图中观察到的值({{wos [‘wordFormNgForm_1465657579’]}})变为未定义的可能原因是您正在获取新值并将它们的副本存储在控制器的self.word属性中：

...
.then((response: ng.IHttpPromiseCallbackArg<IWordRow>): any => {
    self.word = angular.copy(response.data);   // <==
    ...
},

通过这样做,在视图中先前重复的word.wordForms下的集合被更改,并且监视的值不再是对此集合的项的有效引用.

同时,就视图中的ng-repeat而言,wordEditSubmit中的self [‘wordNgForm’]肯定与FormController对象无关.这是因为与ng-form关联的FormController对象键必须具有类似于wordFormNgForm_1465657579的格式(由您强加).因此,在这里,您在self [‘wordNgForm’]下引用了一个未定义的属性：

...
.then((response: ng.IHttpPromiseCallbackArg<IWordRow>): any => {
    self.word = angular.copy(response.data);
    self['wordNgForm'].$setPristine();  // <== 
    ...
},

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!