Question

我正在尝试使用左侧的一个小下拉按钮来实现多语言文本输入字段以选择语言。例如，当下拉菜单显示“de”时，文本字段应绑定到model.multilingualData['de'].someField，依此类推。

我的第一种方法是将ngModel设置为model.multilingualData[selectedLanguage].someField。但是当用户选择不同的语言而没有正确填写字段时，表单上没有设置错误，因为模型现在指向不同的对象。

我的下一个想法是在没有ngModel的情况下创建一个完整的元素指令，但之后我将无法进行其他验证，如ngMaxLength。

我在网上找不到任何有用的东西。关于如何正确实现这一点的任何想法？

修改

这是一个解释问题的小提琴：http://jsfiddle.net/FZ2kg/

当您切换语言时，表单不仅显示有效，还会删除上一个字段值，因为当字段无效时，模型设置为null。

Answer 1

如果你使用这个很棒的外语指令进行多语言，那么

会很好！

https://angular-translate.github.io/

我希望它有所帮助

Answer 2

如果您需要对所有语言版本进行表单验证，并且您在模型中一次性加载所有语言，则无法在表单中为每种语言创建输入并隐藏除当前语言之外的所有语言选择的语言？

这是一个小提琴：http://jsfiddle.net/jvl70/w3rstmwd/5/

<form name="myForm">        
    <div ng-repeat="(lang, value) in model.multilingualData" 
    ng-show="lang==stuff.currentLanguage">            
        <ng-form name="innerForm">
            <div ng-class="{ 'has-error': innerForm.anything.$invalid }">
                <input type="text" name="anything" ng-model="value.someField" ng-maxlength="6"/>
            </div>
        </ng-form>
    </div>        
</form>

（起初我尝试为每个输入使用动态名称，但发现单个字段$ invalid不适用于动态命名的输入。请参阅此帖子来解决它：Dynamic validation and name in a form with AngularJS。作为ng-form的替代方法，您可以为每个输入使用动态名称，并尝试链接上的一个自定义指令。）

我想如果有很多可能的语言，这种方法可能会变慢，但对于一些语言来说还是可以的。

angularjs多语言文本字段与ngmodel

2 个答案: