how to setValidators() on multiple formControl at the same time? - angular2-forms

Is there any alternative method to minimise line of code.
this.addRoeForm.controls.supplierName.setValidators(Validators.required);
this.addRoeForm.controls.fromCurrency.setValidators(Validators.required);
this.addRoeForm.controls.toCurrency.setValidators(Validators.required);
this.addRoeForm.controls.roe.setValidators(Validators.required);

Object.keys(this.addRoeForm.controls).forEach(key => {
this.addRoeForm.get(key).setValidators([Validators.required]);
});

Related

Oidc-client-js trigger login when app start.What is the correct way?

i am using identity server 4 and oidc-client-js for auth, with angular frame work. I faced it this issue,
I am trying to trigger login redirect when application start. First i tried this code;
this.authService.userManager.getUser().then((user) => {
if (!(user)) {
this.authService.userManager.signinRedirect();
}
});
and user always returning null. Then i tried the same code with timeout, like this;
this.authService.userManager.getUser().then((user) => {
setTimeout(() => {
if (!(user)) {
this.authService.userManager.signinRedirect();
}
}, 2000);
});
after that, everything works good. But i'm not comfortable about using timeout. I tried using subject in callback component signinRedirectCallback, i tried userLoaded event but i can't succeeded. And finally i wrote this code;
In app component ngOnInit;
if (!this.authService.currentUser) {
this.authService.userManager.signinRedirectCallback().then((user) => {
// this.authService.userLoadedSub.next(user);
this.authService.currentUser = user;
console.log("01");
//navigate related route
this.initData();
}).catch((err) => {
console.log("signinRedirectCallback Error", err);
this.authService.userManager.signinRedirect();
});
}
Is this a good way to what i need? Is there any other way?
Many thanks for yor helps.

Cypress: intercept and modify part of the response

Based on Cypress docs, I want to modify a field on the response and leave everything else unchanged, after first loading the fixture. I know I could easily do this with 2 fixtures but I would not like to duplicate it for a simple field change. I tried variations of the following code but to no success. Any ideas?
it('Should have the correct values in monthly', () => {
cy.intercept('POST', `**/full`, (req) => {
req.continue(res => {
res.body.data.monthly = 5000;
res.send(res);
})
});
cy.fixture('calculator/monthlyRepayment.json').as('fixtures:monthlyRepayment');
cy.route('POST', `**/full`, '#fixtures:monthlyRepayment').as(`request:fullData`);
cy.get('[data-test="calculator:monthlyRepayment"]').should('contain', '$5000.00');
})
I left a comment, but this will solve your problem, too. You'll want to modify your fixture data before using it:
it('Should have the correct values in monthly', () => {
cy.fixture('calculator/monthlyRepayment.json').then((json) => {
json.monthly = 5000;
cy.intercept('POST', '**/full', json);
// cy.visit called somewhere here
cy.get('[data-test="calculator:monthlyRepayment"]').should('contain', '$5000.00');
});
})

Select2 AJAX doesn't update when changed programatically

I have a Select2 that fetches its data remotely, but I would also like to set its value programatically. When trying to change it programatically, it updates the value of the select, and Select2 notices the change, but it doesn't update its label.
https://jsfiddle.net/Glutnix/ut6xLnuq/
$('#set-email-manually').click(function(e) {
e.preventDefault();
// THIS DOESN'T WORK PROPERLY!?
$('#user-email-address') // Select2 select box
.empty()
.append('<option selected value="test#test.com">test#test.com</option>');
$('#user-email-address').trigger('change');
});
I've tried a lot of different things, but I can't get it going. I suspect it might be a bug, so have filed an issue on the project.
reading the docs I think maybe you are setting the options in the wrong way, you may use
data: {}
instead of
data, {}
and set the options included inside {} separated by "," like this:
{
option1: value1,
option2: value2
}
so I have changed this part of your code:
$('#user-email-address').select2('data', {
id: 'test#test.com',
label: 'test#test.com'
});
to:
$('#user-email-address').select2({'data': {
id: 'test#test.com',
label: 'test#test.com'
}
});
and the label is updating now.
updated fiddle
hope it helps.
Edit:
I correct myself, it seems like you can pass the data the way you were doing data,{}
the problem is with the data template..
reading the docs again it seems that the data template should be {id, text} while your ajax result is {id, email}, the set manual section does not work since it tries to return the email from an object of {id, text} with no email. so you either need to change your format selection function to return the text as well instead of email only or remap the ajax result.
I prefer remapping the ajax results and go the standard way since this will make your placeholder work as well which is not working at the moment because the placeholder template is {id,text} also it seems.
so I have changed this part of your code:
processResults: function(data, params) {
var payload = {
results: $.map(data, function(item) {
return { id: item.email, text: item.email };
})
};
return payload;
}
and removed these since they are not needed anymore:
templateResult: function(result) {
return result.email;
},
templateSelection: function(selection) {
return selection.email;
}
updated fiddle: updated fiddle
For me, without AJAX worked like this:
var select = $('.user-email-address');
var option = $('<option></option>').
attr('selected', true).
text(event.target.value).
val(event.target.id);
/* insert the option (which is already 'selected'!) into the select */
option.appendTo(select);
/* Let select2 do whatever it likes with this */
select.trigger('change');
Kevin-Brown on GitHub replied and said:
The issue is that your templating methods are not falling back to text if email is not specified. The data objects being passed in should have the text of the <option> tag in the text property.
It turns out the result parameter to these two methods have more data in them than just the AJAX response!
templateResult: function(result) {
console.log('templateResult', result);
return result.email || result.text;
},
templateSelection: function(selection) {
console.log('templateSelection', selection);
return selection.email || selection.id;
},
Here's the fully functional updated fiddle.

how to attach a callback to Bootstrap Typeahead plugin

Using the custom bootstrap plugin for typeahead functionality
https://gist.github.com/1891669
How to attach a callback for 'select' event?
The following code doesn't work.
var selectedFn = $('.typeahead dropdown-menu').on('select', function( ev ){
console.log(ev);
});
Can someone explain how this works?
A new way of doing this is:
$('.input').typeahead({
// snip
}).on('typeahead:selected', function() {
// on selected
});
$('#myselector').typeahead({
itemSelected:function(data,value,text){
console.log(data)
alert('value is'+value);
alert('text is'+text);
},
//your other stuffs
});
You have to just pass itemSelected in the callback function and it will give you the selected item.
Hope this will work for you.
You can just listen to your inputs change event like this:
$('input.typeahead').on('change', function () { ... })
Specify the arguments in the function that handles the event in order to get the value selected as suggested in the documentation at https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#custom-events
.on('typeahead:select', function(ev,value) {
//value = the selected object
//e.g.: {State: "South Dakota", Capital: "Pierre"}
})
It gives exactly the same result with typeahead:select instead of typeahead:selected. I'd rather go with the one which is documented.
$('.typeaheadGroupSelect').typeahead({
// snip
}).on('typeahead:selected', function(data, value, text) {
// on selected
console.log(data);
console.log(value.idPublic); // here you can access all json object by using value.key
console.log(value.name);
});
I used above code snippet to access data from the selection and assign certain hidden values to another input.
Prior I added an object to the data source typeahead is using to query data, see below:
var jsonData = [
{"id":"1","idPublic":"978343HFJ","name":"Volkswagen Group Sales International"},
{"id":"2","idPublic":"8343JJR98","name":"BMW Group Sales APAC"},
{"id":"3","idPublic":"935723JFF","name":"Jaguar Group Sales Asia"},
{"id":"4","idPublic":"3243JFUFF","name":"Mercedes Benz Group Sales Europe"}
];

jquery ui autocomplete without filter

I need to show user all autocomplete choices, no matter what text he already wrote in the field? Maybe i need some other plugin?
$('#addressSearch').autocomplete("search", "");
That doesn't work.
There are two scenarios:
You're using a local data source. This is easy to accomplish in that case:
var src = ['JavaScript', 'C++', 'C#', 'Java', 'COBOL'];
$("#auto").autocomplete({
source: function (request, response) {
response(src);
}
});
You're using a remote data source.
$("#auto").autocomplete({
source: function (request, response) {
// Make AJAX call, but don't filter the results on the server.
$.get("/foo", function (results) {
response(results);
});
}
});
Either way you need to pass a function to the source argument and avoid filtering the results.
Here's an example with a local data source: http://jsfiddle.net/andrewwhitaker/e9t5Y/
You can set the minLength option to 0, then it should work.

Resources