angularjs multilingual text field with ngmodel

Question

I'm trying to implement a multilingual text input field with a little dropdown button to the left for selecting the language. For instance, when the dropdown menu shows 'de' the text field should be bound to model.multilingualData['de'].someField and so on.

My first approach was to set ngModel to model.multilingualData[selectedLanguage].someField. But when the user selects a different language without filling in the field correctly, no error is set on the form, because the model now points to a different object.

My next idea was to create an entire element directive without ngModel, but then I wouldn't be able to do other validations like ngMaxLength.

I couldn't find anything helpful on the web either. Any idea on how to implement this properly?

EDIT

Here's a little fiddle that illustrates the problem: http://jsfiddle.net/FZ2kg/

Not only that the form appears valid when you switch languages, the previous field value is also deleted, because the model is set to null when the field becomes invalid.

Do you think you could put together a JSFiddle to illustrate the problem? — Lukas, Feb 12 '14 at 15:38

Jorge Guerola · Answer 1 · 2016-01-19T10:27:22.597

3

would be nice if you use this awesome external directive for multilanguage!

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

I hope it helps

edited Jan 19 '16 at 10:27

answered Feb 13 '14 at 13:58

Jorge Guerola

2,072
1
16
18

Thanks for the hint. I looked at it briefly, but it didn't seem like it could be of any help. I'm not trying to translate strings, I'm looking for a way to let the user translate database records. – user2323470 Mar 12 '14 at 17:08
your posted link is dead meanwhile – steven Jan 18 '16 at 20:22
1

could be easy to find if you search angular-translate in google :) – Jorge Guerola Jan 19 '16 at 10:28

score 0 · Answer 2 · edited May 23 '17 at 12:23

If you need to have form validation for all language variations and you're loading all languages at once in your model, can't you just create an input per language in the form and hide all but the currently selected language?

Here's a fiddle: 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>

(At first I tried to use dynamic names for each input but found that the individual field $invalid wasn't available for dynamically named inputs. See this post to get around it: Dynamic validation and name in a form with AngularJS. As an alternative to ng-form, you could use dynamic names for each input and try one of the custom directives on the link.)

I guess if there were many possible languages, this approach might get slower but it's ok for a few languages.

angularjs multilingual text field with ngmodel

2 Answers2