NgForm 控件的问题按字母顺序排列 Angular

Question

我有一个函数 formErrorMessage，它将循环遍历 NgForm 中的表单控件并检查它是否有错误并将错误消息附加到数组。但是，错误消息的排列顺序与我的表格不一样，因为表格控件是按字母顺序排列的。

formErrorMessage(formControls : { [key: string]: AbstractControl; }){

    var aryErrors: Array<{ [key: string] : string }> = [];
    
    //loop tru the controls
    Object.keys(formControls).forEach(key => {

        //if has errors
        var objErrors = formControls[key].errors;
        var formObj = key;

        if(objErrors){
            
            //loop tru the errors
            Object.keys(objErrors).forEach(key => {
                //retrive the relevant message from ValidationFormsService
                aryErrors[formObj] = this.vf.errorMessages[formObj][key];
            });
        
        }
    });

    return aryErrors;
}//end formErrorMessage

Answer 1

我知道对象不知道 NgForm 控件的顺序，所以我创建了一个表单字段数组并遍历该数组并检查 NgForm 错误以保留表单字段排列。

服务中

public aryFormFields : Array<{[key : string] : any}> = [
{"membID" : ''},
{"salutation": ''},
{'name': ''},
{'referralSource': ''},
{'referralID': ''},
{'mobileNo': ''},
{'email': ''},
{'addr1': ''},
{'addr2': ''},
{'addr3': ''},
{'postalCode': ''},
{'membType': ''},
{'startDate': ''},
{'endDate': ''},
{'entitleCredit': ''},
{'lastCreditUseDate': ''},
{'lastCreditUseAmt': ''},
{'totalCreditBalance': ''},
{'serviceAdvisorID': ''},
{'pdpaConcern': ''},
{'pdpaSMS': ''},
{'pdpaEmail': ''},
{'pdpaPhone': ''},

];

在表单验证函数中

const formFields = this.memberService.aryFormFields;

    let aryErrors: Array<{[key : string] : any}> = [];

    for(var i =0; i < formFields.length; i++){

        //loop tru the empty aryErrors
        Object.keys(formFields[i]).forEach(key=> {
            var objErrors = formControls[key].errors;
            var formObj = key;

            //if has error
            if (objErrors) {
                //loop tru the errors
                Object.keys(objErrors).forEach(key => {
                    
                    //retrive the relevant message from ValidationFormsService                        
                    if (this.vf.errorMessages.hasOwnProperty(formObj)) {
                        aryErrors[i]={ [formObj] : this.vf.errorMessages[formObj][key]};
                    }
                    else {
                        //if not exist, using formObj
                        aryErrors[i]={ [formObj] : this.toCamelCase(formObj) + " is "+ key +"!"};
                    }
                });
            }
        });
    }//for 
    
    return aryErrors;

NgForm 控件的问题按字母顺序排列 Angular

Issue with NgForm Controls arrange in alphabetical order Angular

angular

angular11