While creating a reactive forms in angular we why we need to use formBuilder instead of FormGroup when we can make reactive forms using either of them.
Here i also provided what i am trying to ask
maintenanceForm: FormGroup;
ngOnInit() {
this.maintenanceForm = new FormGroup({
'value': new FormControl(null),
'dropdown': new FormControl(null)
})
}
/* Here As we can make reactive forms in this two ways but when to use either of them */
this.maintenanceForm = this.formBuilder.group({
body_type_id: ['', Validators.required],
make_name: ['', Validators.required]
});
Form my experience, using FormBuilder reduces the syntax to be written especially when you have very large and complex forms. Please see below links,
https://angular.io/api/forms/FormBuilder
https://angular.io/api/forms/FormGroup
This link shows the syntactic difference between using both approaches
https://angular.io/guide/reactive-forms
Related
I am trying create a storybook for my react-realy app, but i don't know how to set mockup data for that component. For simple a component it is ok, because i can use dummy UI component vs Container approach, but i can't use this for nested relay components, for example there is a UserList component, which i want add to storybook, i can split relay fragment part to container and UI part to the component, but what if UserList children are too relay component? I can't split their when they are a part of the composition of UserList?
Is there some solution for add relay components to the storybook?
I created a NPM package called use-relay-mock-environment, which is based on relay-test-utils which allows you to make Storybook stories out of your Relay components.
It allows nesting of Relay components, so you can actually make stories for full pages made out of Relay components. Here's an example:
// MyComponent.stories.(js | jsx | ts | tsx)
import React from 'react';
import { RelayEnvironmentProvider } from 'react-relay';
import createRelayMockEnvironmentHook from 'use-relay-mock-environment';
import MyComponent from './MyComponentQuery';
const useRelayMockEnvironment = createRelayMockEnvironmentHook({
// ...Add global options here (optional)
});
export default {
title: 'MyComponent',
component: MyComponent,
};
export const Default = () => {
const environment = useRelayMockEnvironment({
// ...Add story specific options here (optional)
});
return (
<RelayEnvironmentProvider environment={environment}>
<MyComponent />
</RelayEnvironmentProvider>
);
};
export const Loading = () => {
const environment = useRelayMockEnvironment({
forceLoading: true
});
return (
<RelayEnvironmentProvider environment={environment}>
<MyComponent />
</RelayEnvironmentProvider>
);
};
You can also add <RelayEnvironmentProvider /> as a decorator, but I recommend not doing that if you want to create multiple stories for different states/mock data. In the above example I show 2 stories, the Default one, and a Loading one.
Not only that, it requires minimal coding, where you don't need to add the #relay-test-operation directive to your query, and the mocked data is automatically generated for you using faker.js, allowing you to focus on what matters, which is building great UI.
Feel free to review the source code here if you want to implement something similar: https://github.com/richardguerre/use-relay-mock-environment.
Note: it's still in its early days, so some things might change, but would love some feedback!
I also created relay-butler, which is a CLI that takes in GraphQL fragments and outputs Relay components, including a auto-generated query component that wraps the fragment component, and Storybook stories (the Default and Loading ones by default) that wrap that query component. And literally within minutes, I can create beautiful Relay components that are "documented" within Storybook.
Would also love some feedback for it!
Is there a way to get the solution referenced here:
Twitter bootstrap typeahead multiple values?
To work with typeahead.js where updater, matcher etc functions are not available?
At https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#custom-events you can read:
typeahead:selected – Triggered when a suggestion from the dropdown
menu is selected. The event handler will be invoked with 3 arguments:
the jQuery event object, the suggestion object, and the name of the
dataset the suggestion belongs to.
demo: http://jsfiddle.net/3hL70h1L/
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
displayKey: 'value',
source: substringMatcher(states)
})
.on('typeahead:selected',
function(event,suggestions) {
$myTextarea.append(suggestions.value, ' ');
$('.typeahead').val('');
}
);
Notice that you also can use The Typeahead plugin from Twitter's Bootstrap 2 ready to use with Bootstrap 3 (can also be integrated with Bloodhound)
Both typeahead plugins also work together with Bootstrap tags support, see https://github.com/bassjobsen/Bootstrap-3-Typeahead#bootstrap-tags-input which seems to offer a similar functionality.
I am using JQuery UI in an Angular application. I noticed that I was repeating the same pattern for each directive: Call the JQuery UI function with a single complex object for initialization. Rather than write separate directives for each component, I have found it easier to use a stub directive. This may not be a long term solution but it works for now.
Is there a better way to inject the attributes to make the markup more readable while still keeping the generic nature of the directive? Specifically, can I avoid using a JSON string so that it reads more like a normal angular directive.
The existing line:
<button jquiw-control='{"control":"button","options":{"label":"Hello","icons": {"primary": "ui-icon-gear","secondary": "ui-icon-triangle-1-s"}}}' ng-click="jump()"></button>
<button jquiw-control="button" jquiw-button-label="Hello" jquiw-button-icons-primary= "ui-icon-gear" jquiw-button-icons-secondary="ui-icon-triangle-1-s" ng-click="jump()"></button>
Here is a plunk of a working example of my Generic ui directive. http://plnkr.co/edit/eRoOeq
At least you can put the hardcoded JSON in the controller like this
$scope.config = {
"control": "button",
"options": {
"label": "Hello",
"icons": {
"primary": "ui-icon-gear",
"secondary": "ui-icon-triangle-1-s"
}
}
};
and then change the template to
<button jquiw-control='{{config}}' ng-click="jump()"></button>
Plunker: http://plnkr.co/edit/yY1Lc2?p=preview
I'm using Handlebars.js, and currently all my templates live inside script tags which live inside .html files housing dozens of other templates, also inside script tags.
<script type="text/template" id="template-1">
<div>{{variable}}</div>
</script>
<script type="text/template" id="template-2">
<div>{{variable}}</div>
</script>
<script type="text/template" id="template-3">
<div>{{variable}}</div>
</script>
...
Then I include this file on the server-side as a partial.
This has the following disadvantages:
A bunch of templates are crammed into HTML files.
Finding a given template is tedious.
I'm looking for a better way to organize my templates. I'd like each each template to live in its own file. For example:
/public/views/my_controller/my_action/some_template.html
/public/views/my_controller/my_action/some_other_template.html
/public/views/my_controller/my_other_action/another_template.html
/public/views/my_controller/my_other_action/yet_another_template.html
/public/views/shared/my_shared_template.html
Then at the top of my view, in the backend code, I can include these templates when the page loads, like this:
SomeTemplateLibrary.require(
"/public/views/my_controller/my_action/*",
"/public/views/shared/my_shared_template.html"
)
This would include all templates in /public/views/my_controller/my_action/ and also include /public/views/shared/my_shared_template.html.
My question: Are there any libraries out there that provide this or similar functionality? Or, does anyone have any alternative organizational suggestions?
RequireJS is really good library for AMD style dependency management. You can actually use the 'text' plugin of requireJS to load the template file in to your UI component. Once the template is attached to the DOM, you may use any MVVM, MVC library for bindings OR just use jQuery events for your logic.
I'm the author of BoilerplateJS. BoilerplateJS reference architecture uses requireJS for dependency management. It also provides a reference implementations to show how a self contained UI Components should be created. Self contained in the sense to handle its own view template, code behind, css, localization files, etc.
There is some more information available on the boilerplateJS homepage, under "UI components".
http://boilerplatejs.org/
I ended up using RequireJS, which pretty much let me do this. See http://aaronhardy.com/javascript/javascript-architecture-requirejs-dependency-management/.
I use a template loader that loads the template using ajax the first time it is needed, and caches it locally for future requests. I also use a debug variable to make sure the template is not cached when I am in development:
var template_loader = {
templates_cache : {},
load_template : function load_template (params, callback) {
var template;
if (this.templates_cache[params.url]){
callback(this.templates_cache[params.url]);
}
else{
if (debug){
params.url = params.url + '?t=' + new Date().getTime(), //add timestamp for dev (avoid caching)
console.log('avoid caching url in template loader...');
}
$.ajax({
url: params.url,
success: function(data) {
template = Handlebars.compile(data);
if (params.cache){
this.templates_cache[params.url] = template;
}
callback(template);
}
});
}
}
};
The template is loaded like this:
template_loader.load_template({url: '/templates/mytemplate.handlebars'}, function (template){
var template_data = {}; //get your data
$('#holder').html(template(template_data)); //render
})
there's this handy little jquery plugin I wrote for exactly this purpose.
https://github.com/cultofmetatron/handlebar-helper
So I'm trying to use dijit tooltip.
http://docs.dojocampus.org/dijit/Tooltip
However, they only have the attribute of "connectIds" this seems rather limiting and I'm surprised that it was programmed this way. I don't know how many hyperlinks my pages will have, so wouldn't it be better to have an option like "connectByHTMLtag" so that I can map all "a" tags to a specific tooltip? Or even a "connectClasses" would make a bit more sense.
This means I have to manually enter id="tooltip1" id="tooltip2" etc.
Anyone find a way around this??
You could connect them when the page loads using dojo.query.
Give all of your hyperlinks a class that you can use to select them later:
Etc
Then in your JavaScript you can use something like this:
dojo.addOnLoad(function() {
dojo.query(".link-tooltip").forEach(function(node, index, arr) {
new dijit.Tooltip({
connectId: [node.id],
label: "My tooltip!"
});
});
});
This code is untested, but that's basically how you could do it. dojo.query is very handy for this sort of thing!
As of Dojo Toolkit 1.8, it is now possible to attach a tooltip via a selector:
require(["dojo/ready", "dijit/Tooltip", "dojo/query!css2"], function(ready, Tooltip){
ready(function(){
new Tooltip({
connectId: "myTable",
selector: "tr",
getContent: function(matchedNode){
return matchedNode.getAttribute("tooltipText");
}
});
});
});
http://dojotoolkit.org/reference-guide/1.8/dijit/Tooltip.html#attaching-to-multiple-nodes