JSFiddle - React, Tailwind, and code Playground

by pwarelis

HTML

<div ng-controller="someCtrl" style="padding:20px">
    <form name="myForm">
        Set language: {{ lang }}<br/>
        Custom message: {{ customMessage }}<br/><br/>
    <input type="text"
           ng-model="code"
           required
           ng-pattern="/^([\d]+)$/"
           custom-validate="{{ 'REQUIRED'|translate:lang }}"/>
        <button>Submit</button>
        <button ng-click="toggleLanguage()">Toggle language</button>
    </form>
</div>

JavaScript

var app = angular.module('app', []);

app.filter('translate', function($filter) {
	return function(input, lang) {
        return (lang=="en") ? "English message: "+input : "French message: "+input;
	}
});

app.directive('customValidate', function() {
	return {
		restrict : 'A',
		link : function(scope, el, attr) {
			if (el[0].setCustomValidity === undefined)  return;

			attr.$observe('customValidate', function(value) {
				scope.customMessage = value;
				el[0].setCustomValidity(value);
			});
		}
	}
});

function someCtrl($scope) {
    $scope.code = '';
    $scope.customMessage = "";
    $scope.lang = 'en';
    
    $scope.toggleLanguage = function() {
        $scope.lang = ($scope.lang == "en") ? "fr" : "en";
    }
}