Nested property keys is working fine with default type. But it's not working with the below custom template. Why ?
Here is my fields:
vm.fields = [
{
type: 'editableInput',
key: 'profile.name.firstname',
templateOptions: {
label: 'First Name'
}
},
{
type: 'editableInput',
key: 'profile.name.lastname',
templateOptions: {
label: 'Last Name'
}
}
];
What I expected :
{
"profile": {
"name": {
"firstname": "rajagopal",
"lastname": "subramanian"
}
}
But this is what I get:
{
"profile.name.firstname": "rajagopal",
"profile.name.lastname": "subramanian"
}
My Formly Config:
formlyConfig.setType({
extends: 'input',
template: '<div><span editable-text="model[options.key]" e-name="{{::id}}"}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableInput'
});
Here is JSBIN
Thanks in advance.
The issue is with how nested keys work with angular-formly. Basically it only works with elements that have an ng-model. The work around for you is to use the model property, and not nested keys (like this):
{
type: 'editableInput',
model: 'model.profile.name',
key: 'firstname',
templateOptions: {
label: 'First Name',
placeholder: 'Enter your First Name'
}
},
{
type: 'editableInput',
model: 'model.profile.name',
key: 'lastname',
templateOptions: {
label: 'Last Name',
placeholder: 'Enter your First Name'
}
}
Good luck!
profile.name.firstname - > profile[name][firstname]
It's my imagine.I have never used Angular
Related
I am following a course on react native and We are using Sanity as our backend. I have already set the schemas and made the adjustments in my Sanity Studio.
HERE IS MY FEATURED SCHEMA CODE:
export default {
name: 'featured',
title: 'featured Menu Categories',
type: 'document',
fields: [
{
name: 'name',
type: 'string',
title: 'Featured category name',
validation: (Role) => Role.required(),
},
{
name: 'short_description',
type: 'string',
title: 'Short description',
validation: (Role) => Role.max(200),
},
{
name: 'restuarants',
type: 'array',
title: 'Restuarants',
of: [{ type: 'reference', to: [{ type: 'restuarant' }] }],
},
],
};
HERE IS MY RESTAURANT SCHEMA CODE:
export default {
name: 'restaurant',
title: 'Restuarant',
type: 'document',
fields: [
{
name: 'name',
type: 'string',
title: 'Restuarant name',
validation: (Role) => Role.required(),
},
{
name: 'short_description',
type: 'string',
title: 'Short description',
validation: (Role) => Role.max(200),
},
{
name: 'image',
type: 'image',
title: 'Image of the Restuarant',
},
{
name: 'lat',
type: 'number',
title: 'latitude of the restaurant',
},
{
name: 'long',
type: 'number',
title: 'longitude of the restaurant,
},
{
name: 'address',
type: 'string',
title: 'Address of the Restuarant',
validation: (Role) => Role.required(),
},
{
name: 'rating',
type: 'number',
title: 'Enter a rating of (1 - 5)',
validation: (Role) =>
Role.required()
.min(1)
.max(5)
.error('please enter a number between 1 - 5'),
},
{
name: 'type',
type: 'string',
title: 'Category',
validation: (Role) => Role.required(),
type: 'reference',
to: [{ type: 'category' }],
},
{
name: 'dishes',
type: 'array',
title: 'Dishes',
of: [{ type: 'reference', to: [{ type: 'dish' }] }],
},
],
};
I also did one for the dish and category.
Then I went to my Sanity Studio to fill in my restaurant schema fields;
After I went to my Vision Board in Sanity Studio and did a query(Just like the instructor):
*[_type == "featured"]{
...,
restuarants[]=> {
...,
dishes[]=> ,
type=> {
name
}
},
}
And I got an error of:
unexpected token ",", expected expression ;
I did what any developer would have done if they got an error. I double-checked my code and compared it to the instructor in the video. (I still got the error). Then I googled it(And found no answer). It's been 2 days now and I still haven't found anything.
This is my first querying in Sanity and I am not sure what I am doing wrong with my query. Can anyone please help me? Thanks.
As the error mentioned, you missed a ' in your schema code.
Keep a ' after restaurant
{
name: 'long',
type: 'number',
title: 'longitude of the restaurant',
},
No worries I found the answer to my problem. The problem was with my querying.
HERE WAS MY CODE BEFORE:
*[_type == "featured"]{
...,
restuarants[]=> {
...,
dishes[]=> ,
type=> {
name
}
},
}
THIS IS HOW I WAS SUPPOSED TO WRITE IT:
*[_type == "featured"]{
...,
restuarants[]-> {
...,
dishes[] -> ,
type-> {
name
}
},
}
I was supposed to use a straight line instead of an equal sign.
I hope this helps anyone who runs into this problem
I have the following nested object:
export const mockData = {
sections: [
{
name: 'Client',
subSections: [
{
name: 'Client Detail'
}
]
},
{
name: 'Sales',
subSections: [
{
name: 'Overview',
subSections: [
{
name: 'Overview - A',
fields: [
{
key: 'firmName',
type: 'input',
templateOptions: {
label: 'Firm Name',
required: true
}
},
{
key: 'requestOption',
type: 'select',
templateOptions: {
label: 'Request Option',
required: true,
options: [
{ value: '1', label: '1' },
{ value: '2', label: '2' },
{ value: '3', label: '3' },
{ value: '4', label: '4' }
]
}
},
{
key: 'region',
type: 'select',
templateOptions: {
label: 'Region',
required: true,
options: [
{ value: '1', label: '1' },
{ value: '2', label: '2' },
{ value: '3', label: '3' },
{ value: '4', label: '4' },
{ value: '5', label: '5' }
]
}
}
]
}
]
}
]
}
]
};
and I would like to access the array from the fields property in order to render a form. Right now what I have is overviewA: FormlyFieldConfig[] = mockData.sections[1].subSections[0].subSections[0].fields, but I am facing the error of
Property 'subSections' does not exist on type '{ name: string; }'.
However, this error goes away when do a work-around and I add the property subSections to the nested object like so:
export const mockData = {
sections: [
{
name: 'Client',
subSections: [
{
name: 'Client Detail',
subSections: []
}
]
},
{
name: 'Sales',
subSections: [
{
name: 'Overview',
subSections: [
{
name: 'Overview - A', ...
I was wondering why
I was facing the issue without the work-around, and
How can I access the array from the property fields without the work-around?
I have this array
this.complementaryFields = [
{
fieldName: 'complementaryLaser',
label: 'Laser Hair Removal'
},
{
fieldName: 'complementarySkin',
label: 'Skin'
},
{
fieldName: 'complementaryInjection',
label: 'Cosmetic Injections'
},
{
fieldName: 'complementaryNotSure',
label: 'Not Sure'
}
];
and I would like to create a new array out of it as below:
this.complementaryFieldNames = [
'complementaryLaser',
'complementarySkin',
'complementaryInjection',
'complementaryNotSure'
];
How would you do it using lodash?
You can simply use lodash _.map to get that result:
const data = [{ fieldName: 'complementaryLaser', label: 'Laser Hair Removal' }, { fieldName: 'complementarySkin', label: 'Skin' }, { fieldName: 'complementaryInjection', label: 'Cosmetic Injections' }, { fieldName: 'complementaryNotSure', label: 'Not Sure' } ];
const result = _.map(data, 'fieldName')
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
With ES6 you can do same with Array.map and destructuring:
const data = [{ fieldName: 'complementaryLaser', label: 'Laser Hair Removal' }, { fieldName: 'complementarySkin', label: 'Skin' }, { fieldName: 'complementaryInjection', label: 'Cosmetic Injections' }, { fieldName: 'complementaryNotSure', label: 'Not Sure' } ];
const result = data.map(({fieldName}) => fieldName)
console.log(result)
In every grid (Kendo for AngujarJs) on my project that contains a DateTime value I'm getting this NaN/NaN/NaN
Here is my schema:
schema: {
model: {
id: 'RequestId',
fields: {
RequestId: { type: 'number' },
RequestNumber: { type: 'number'},
FileNumber: { type: 'string' },
RegistrationDate: { type: 'datetime' },
RequestStatus: { type: 'string' },
UnitName: { type: 'string' }
}
}
}
I've tried with RegistrationDate: { type: 'string' }, or RegistrationDate: { type: 'date' }, but nothing change, also I tried this on my columns:
{
field: 'RegistrationDate',
title: 'Fecha de Registro',
type: 'date'
},
Or type: 'datetime' and nothing.
Here is what I get from the server:
Any idea on how to make it work? Its pretty basic to show a Date in a grid, I know, in other projects I have no problem, but as you can see, I tried all I could think of.
Try this:
{
field: 'RegistrationDate',
title: 'Fecha de Registro',
format: "{0:yyyy-MM-dd HH:mm:ss}"
}
I'm working on a simple angular app with two controllers:
function Invite($scope) {
$scope.fieldsets =
[
{
fields:
[
{
label: 'First Name',
name: 'firstname',
key: 'entry.810220554',
type: 'text',
required: true
},
{
label: 'Last Name',
name: 'lastname',
key: 'entry.1653030831',
required: true,
},
{
label: 'Email',
name: 'email',
key: 'entry.1727688842',
required: true,
type: 'email',
},
{
key: 'entry.1602323871',
type: 'radio',
labels:
[
{
name: 'media',
label: 'Media'
},
{
name: 'frilans',
label: 'Frilans'
}
],
}
],
}
];
}
function Questionnaire($scope, $http){
$scope.post = function(){
console.log();
$http.post('/signup.php', $scope.quiz).
success(function(data, status, headers, config){
console.log(data);
});
};
}
The Questionare-scope is a child of the invite scope. Here is simplified version of the layout
<div ng-controller="Invite">
<form ng-controller="Questionnaire" method="POST" ng-submit="post()">
<input ng-model="{{field.key}}" />
</form>
</div>
The first one generates a form where I want the key-values to be used as ng-model.
In the second scope, so that I can post them to the server with that key.
I first tried to use
<input ng-model="{{field.key}}" />
in my html template, this was my intuitive guess, but it rendered an error.
<input ng-model="field.key" />
this also giving error.
Here is a plnkr:
http://plnkr.co/edit/rnQXlCCFQypVLs20OuTt?p=preview
There is no object fields in the questionnaire scope. You may be able to reference the object to in the outer scope by using ng-repeat=field in $parent.fields, I'm not sure if nested scopes are related via prototypical inheritance.
Another approach would be to create a service that tracks fields and inject it into all the controllers that need access to the data.