I am trying to translate formlyjs required validation message in angularjs that's the code what I have tried but it doesn't translate or bring the translated string in "REQUIRED" I am using angular-translate.
Output i am getting UsernameREQUIRED instead of Username is required
I have looked at this question and answer over stackoverflow. it works with out to.label but i need to have this to.label concatenation.
Any help or suggestion please.
$translateProvider.translations("en", {
REQUIRED: "is required",
})
formlyValidationMessages.messages.required = 'to.label + "REQUIRED" | translate';
angular.module('templates/formly/validation-messages.html', []).run([
'$templateCache',
function ($templateCache) {
$templateCache.put('templates/formly/validation-messages.html',
'<formly-transclude></formly-transclude>' +
'<div class="validation-messages" ng-messages="(fc[0] || fc).$error" ng-if="(options.formControl[0] || options.formControl).$touched || (options.formControl[0] || options.formControl).$error.required || form.$submitted" ng-messages-multiple>' +
' <div class="label label-danger animate vanishIn enter-vanishIn exit-vanishOut" ng-message="{{::name}}" ng-repeat="(name, message) in ::options.validation.messages">' +
' {{message((fc[0] || fc).$viewValue, (fc[0] || fc).$modelValue, this)}}' +
' </div>' +
'</div>' +
'');
}
]);
Related
I have to use AngularJS to build a dashboard and one of the components is a table.
Since I did not find relevant dependencies/libraries for angularjs (like tabulator or datatables), I am doing it myself.
Instead of using the native angular filter, I built a custom method, but I am not sure if I am following a good approach.
The main idea is that when I pull the data object (array of objects) via Ajax, I create both an "original" and a "current" data object,s and at the beginning, they are exactly the same of course.
Then I created an input field above every column heading and I linked the search function to the blur and keyup events (enter key).
When the search function is triggered, I start making changes to the "current" object. This way I can filter by multiple columns incrementally. I filter the data object using an awesome library called AlaSQL.
I also linked to a button the "reset" method, which simply makes the "current" object equal to the "original" object, and cleans up the input fields.
The point is, am I missing any best practices? Are there better ways to do so with AngularJS?
Any suggestions?
Thanks a lot.
HTML
<div ng-app="myApp">
<div ng-controller="divController">
<my-table></my-table>
</div>
</div>
JS
var app = angular.module('myApp', []);
app.controller('divController', function ($scope, $http) {
$scope.data = {};
$scope.data.current = null;
$scope.data.original = null;
$scope.filter = {
id: {
field: "id",
value: null
},
name: {
field: "name",
value: null
},
owner: {
field: "owner",
value: null
},
}
$scope.reset = function () {
console.log("reset");
$scope.data.current = $scope.data.original;
for (let prop in $scope.filter) {
$scope.filter[prop]["value"] = null;
}
}
$scope.filterExec = function (field, value) {
if (value) {
console.log(`Executing filter on field "${field.trim()}" by this value "${value.trim()}"`);
var filtered = alasql('SELECT * FROM ? where ' + field + ' LIKE "%' + value + '%"', [$scope.data.current]);
$scope.data.current = filtered;
}
}
$http.get("./workspaces_demo_obj.json")
.then(function (response) {
console.log(response);
$scope.data.original = response.data;
$scope.data.current = response.data;
});
});
app.directive('myTable', function () {
return {
template:
'<div>Total rows {{data.current.length}} <button ng-click="reset()">RESET</button></div>' +
'<table class="table table-responsive table-sm">' +
'<thead>' +
'<tr><th>Workspace ID</th>' +
'<th>Name</th>' +
'<th>Owner</th></tr>' +
'<tr><th><input ng-model="filter.id.value" ng-blur="filterExec(filter.id.field, filter.id.value)" ng-keydown="$event.keyCode === 13 && filterExec(filter.id.field, filter.id.value)" placeholder="Filter by id"></input></th>' +
'<th><input ng-model="filter.name.value" ng-blur="filterExec(filter.name.field, filter.name.value)" ng-keydown="$event.keyCode === 13 && filterExec(filter.name.field, filter.name.value)" placeholder="Filter by name"></input></th>' +
'<th><input ng-model="filter.owner.value" ng-blur="filterExec(filter.owner.field, filter.owner.value)" ng-keydown="$event.keyCode === 13 && filterExec(filter.owner.field, filter.owner.value)" placeholder="Filter by owner"></input></th></tr>' +
'</thead>' +
'<tbody>' +
'<tr ng-repeat="x in data.current">' +
'<td>{{ x.workspace_id }}</td>' +
'<td>{{ x.name }}</td>' +
'<td>{{ x.owner }}</td>' +
'</tr>' +
'</tbody>' +
' </table>',
restrict: 'E'
};
});
Here is how I am adding fields.
$scope.addEmailField = function () { //Function to add new email field.
if (valid <= 1 && checkToDelete == 0) {
var mailTxtId = 'mail' + valid;
var mailModel = 'Contact_Email' + valid;
var hide = 'hide' + valid;
hide = false;
console.log(mailTxtId);
var emailDiv = angular.element(document.querySelector('#emailDiv'));
var element = $compile('<div id="' + mailTxtId + '" style="margin-left: -60px; width:200px; margin-top:15px"><input id= "' + mailModel + '" type = "text" class="form-control" ng-model="' + mailModel + '" ng-blur="validateEmailDynamic(' + valid + ')">' +
'<input id="' + valid + '" class="form-control" style="margin-left: 206px; width:54px; margin-top:-34px" type="button" value="-" ng-click="deleteField(' + valid + ')"><span ng-show ="' + hide + '" style="color:red">' +
'Invalid email</span></div>')($scope);
emailDiv.append(element);
valid = valid + 1;
}
};
But not getting the value of ng-model.
Store your input box in a directive's template. Then add ng-class that would determine whether it should show or not.
app.directive('inputBox', function(){
template:'<input ng-model="item">'
});
Usage in the html:
<div ng-class="{ input-box : triggerInputBox }"></div>
Controller:
$scope.triggerInputBox = true;
This is just one of many ways to accomplish this. But directives are very useful for dynamically showing templates.
I am trying to disable options in a ui-select using a function in the ui-disable-choice. Calling a function doesn't seem to work. Any ideas on what I am doing wrong?
UI-Select
<ui-select
id="affSel--{{seat.sli_no}}"
class="affSel"
perf-no ="{{seat.perf_no}}"
sli-no="{{seat.sli_no}}"
ng-required="true"
theme="bootstrap"
on-select="changedAffiliate(mySeat.seat.sli_no, cartPerf.perf_no, seat.sli_no,seat)">
<ui-select-match placeholder="-- Select person --">{{$select.selected.fname + ' ' + $select.selected.lname}}</ui-select-match>
<ui-select-choices repeat="affiliate in affiliates | seatAffTypeFilter:seat.seatAff"
ui-disable-choice="checkDisable(affiliate.customer_no,cartPerf.perf_no, seat.sli_no)">
<div ng-bind-html="affiliate.fname + ' ' + affiliate.lname"></div>
<small ng-show="affiliate.disabled">{{AffSelected}}</small>
<small ng-show="affiliate.validation_pass_age == 'N'">{{invalidAffLbl}}</small>
</ui-select-choices>
</ui-select>
Function
$scope.checkDisable = function (customer_no, cur_perf_no, cur_sli_no) {
$.each($scope.selectedAff, function (i) {
if (this.customer_no == customer_no && this.perfNo == cur_perf_no && this.sli_no != cur_sli_no) {
return true;
} else {
return false;
}
})
}
try
$scope.checkDisable = function (customer_no, cur_perf_no, cur_sli_no) {
return false; //true;
}
if this does not work it would mean that function types are not supported, but if it works, then you have code issue...
mostly you are not capturing result of $.each function, from the context it seems you need _.find rather than $.each
How do I apply one time lazy binding to the following where the value is composed of an expression:
<span ng-bind="::firstname + ' ' + ::lastname"></span> // breaks
Why not composing them in your controller:
$scope.name = $scope.firstname + ' ' + $scope.lastname;
And then simply:
<span ng-bind="::name"></span>
<span ng-bind="::(firstname + ' ' + lastname)"></span>
Parens aren't necessary though.
how do i get the text from the $translate ? i get an "[object Object]" if i do it like this:
var str = '<b>' + $translate('room') + '</b><br>';
if ($scope.ad.category == '2' || $scope.ad.category == '1') {
str = '<b>' + $translate('flat') + '</b><br>';
} else if ($scope.ad.category == '3') {
str = '<b>' + $translate('house') + '</b><br>';
}
i'm sure that this is quiet simple and i just don't see the problem (like always -_-)
Try using
$translate.instant('key'); // JS
or
<b>{{ 'flat' | translate }}</b><br> <!-- HTML -->