I have a form with User roles displayed as multiple checkboxes:
<div *ngFor="let role of roles">
<label for="role_{{role.id}}">
<input type="checkbox" ngModel name="roles" id="role_{{role.id}}" value="{{role.id}}"> {{role.name}}
</label>
</div>
the roles object loaded from server looks like this which have all the roles that displayed on the form:
{id: 1, name: "HQ", description: "A Employee User", created_at: "2017-10-07 10:43:17",…}
1
:
{id: 2, name: "admin", description: "A Manager User", created_at: "2017-10-07 10:43:17",…}
2
:
{id: 3, name: "caretaker", description: "", created_at: null, updated_at: null}
now i want to set multiple check boxes using form.setValue, my user object loaded from server looks like this:
"roles" in the user object are the roles that are assigned to the user and needs to be checked on the form
{
"id":13,
"name":"Wasif Khalil",
"email":"wk#wasiff.com",
"created_at":"2017-10-07 10:43:17",
"updated_at":"2017-10-09 07:45:34",
"api_token":"LKVCGPGnXZ3LyiCnyiTAg8XTpck6xWlVkeoMBgtoYZWoAOy4b5epNqMz7KG7",
"roles":[
{"id":2,"name":"admin","description":"A Manager User","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17","pivot":{"user_id":"13","role_id":"2","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17"}
},
{"id":1,"name":"HQ","description":"A Employee User","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17","pivot":{"user_id":"13","role_id":"1","created_at":null,"updated_at":null}
}
]
}
after loading user object form server im setting values like this:
this.form.setValue({
name: user.name,
email: user.email,
password:"",
confirm_password:"",
roles: [1] //here im not sure how to set roles
});
can someone help me check the checkboxes with the loaded user roles object.
Thanks in advance
EDIT:
Sorry for not explaining it well, i have edited my question to explain the question again:
the roles on user object are the roles that are assigned to user
and the roles object is the list of all roles to display in form, look at the image below:
You don't have to use reactive forms to make it done.
HTML
<input ...[checked]="check(user.roles,role.id)" ...>
Typescript:
check(value1, value2){
return (value1.filter(item => item.id == value2)).length
}
DEMO
Related
I can't seem to figure out what method or way I should do to render a comment section which is optimized, where the data is coming from the backend.
I'm Learning Sanity(Headless CMS) with React.
I have a post Details Section and respond is like this:
about: "dasdasdfasdasd",
category: "wallpaper",
destination: "https://asdsadasdasdasdffdbhdfgbsdrg.com",
title: "sddsfasdf",
_createdAt: "2023-01-25T06:13:09Z",
_id: "RufnFSfPPKW3IsZZtUTfLg", // post id
_updatedAt: "2023-01-27T15:43:12Z",
postedBy: {
_ref: '104425784919246942925', // post creator id
_type: 'reference'
},
comments: [{
comment: "This is another trial commment"
postedBy: {
_ref: '1044257823419246942925' // commented user id
}
_key: "67dc6eb1996a"
},
{
comment: "This is another trial commment 2"
postedBy: {
_ref: '104425123125415123412' // commented user id
}
_key: "67dc6eb1996a"
}
]
Now, tell me how should I render the comment section, I want to display 3 items in the comment section.
Image
name
comment message
I have a Firebase database, the data looks like this:
Tickets
334
DateClosed: "",
DateOpened: "2022-01-10",
Description: "employee",
ID: "334",
Name: "linda",
Notes: "new hire"
I want to filter by 'DateClosed' and only display the tickets that have an empty string "" value for the 'DateClosed' property. Then I want to print these results to a basic <p> element or something, doesn't matter.
Using JS, HTML, CSS. This is the code I tried and failed:
const ref = db.ref('Tickets');
ref.orderByChild('DateClosed').equalTo("").on('child_added', (snapshot) => {
console.log(snapshot.key);
report.innerHTML=snapshot.val();
});
'report' refers to a <p> HTML element.
I am passing the following payload through my AWS lambda:
{
from: 'Someone <example#email.here>',
cc: 'Chris <example#email.here>',
to: 'example#email.here',
template: 'payment-request',
'v:name': 'Client name',
'v:lawyerName': 'Chris',
'v:hoursBooked': '{"name":"1 hours","price":"£200","url":"https://www.example.com/booking","value":1,"selected":true,"type":"hour"}',
'v:workTypes': '[ { name: "something 1" }, { name: "something 2" } ]'
}
In the actual template I am using handlebars as follows:
{{name}} // Renders "Client name"
{{#each workTypes}}
{{this.name}} // Doesn't render anything
{{/each}}
or even accessing an object like:
{{hoursBooked.name}} // Doesn't render anything
{{hoursBooked.price}} // Doesn't render anything
In other words, strings seems to be fine but handlebars 3.0 specifically in mailgun templates doesnt' seem to render object's property values or arrays.
Any help would be greatly appreciated.
The key is:
JSON.stringify
Because few months ago i implemented this code (picture below, coming from mailgun.com inside template option menu) and doesn't worked and instead used like you did, and worked for a while and then it just stopped worked.
'v:workTypes': '[ { name: "something 1" }, { name: "something 2" } ]'
Now my code work just fine
var data = {
//Specify email data
from: from_who,
//The email to contact
to: mail,
//Subject and text data
subject: 'Mailing List',
template: "main_template",
'h:X-Mailgun-Variables': ''
}
var workTypes = [ { name: "something 1" }, { name: "something 2" } ];
data['h:X-Mailgun-Variables'] = JSON.stringify({
name: 'Client Name',
workTypes
});
Just solved my own problem:
apparently we need to use an undocumented hidden and not deductible parameter:
h:X-Mailgun-Variables in the payload we send
We also need to put on our wizardry hat 🧙🏻♂️ to debug their own api: if you follow their example in the official website you will never get anywhere in node.js as it will error out (source.on). Make sure you stringify instead as follows:
'h:X-Mailgun-Variables': JSON.stringify({
name: 'Client name',
lawyerName: lawyerName,
hoursBooked: hoursBooked,
workTypes: workTypes
})
bonus: if your account is from eu, well best of luck the normal implementation won't work! But I got you covered...when passing the parameters to the mailgun.client({}) constructor, add in the following:
mailgun.client({
username: 'api',
key: process.env.yourkey,
url: 'https://api.eu.mailgun.net' // This
)}
Please help me to resolve this problem.
I have the object
vm.users = {
helpers: {
name: 'John Smith',
uid: 2094
},
foremen: {
name: 'Michael Duglas',
uid: 2389
}
}
User can create a select which contains foremans, helpers and grouped by role names.
When user choose foreman or helper, other selects should be updated and hide already selected foremen or helpers.
You can see my attached picture for more information.
I find answer from this question but this is not complete.
I want to get working solution.
Say i have the following array
$scope.myArr = [{
name: 'Marc Rasmussen',
phone: 239470192,
title: 'It Dude',
description: 'Hello my name is Marc i am testing the fact that i can search for two fields in an object'
}, {
name: 'Louise',
phone: 1234567890,
title: 'HR Director',
description: 'I am also testing'
}, {
name: 'Leonardo',
phone: 123499,
title: 'Actor',
description: 'I have never won an oscar'
}];
Now as you can see i have the following fields:
name
phone
title
description
Now i repeat these using ng-repeat
<div ng-repeat="obj in myArr">
<div>
name: {{obj.name}}
</div>
<div>
phone: {{obj.phone}}
</div>
<div>
title: {{obj.title}}
</div>
<div>
description: {{obj.description}}
</div>
</div>
Now what i want is that i want a single textfield to search for results in both the name and description and no other field
Normally you would care a variable such as $scope.search.$ but this would search in all fields. alternativly you could make an input field for each field however this does not forfill what i wish to accomplish.
So my question is how can you make 1 input search for two fields at the same time?
here is a fiddle of the above code:
Fiddle
I believe this article might help you out:
Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)
Essentially taking advantage of angular's filter and using a predicate function on each item in the repeated array.