Reusability of repeatable code in html - javascript

I have 10 inputs in my webpage, out of which 4 inputs requires date(Date of birth, Purchase date and many), I have my own custom calendar. Currently I'm repeating the code below all 4 inputs which requires date, Is there any efficient way to do without repeating

Since you are already using AngularJS, and already have your own custom calendar, you can change your custom calendar to a directive. Since, there are multiple instances of directive in a single page, create directive have isolated scope, and use this directive in your form.
Similarly, for validation too, you can create your own directive to do validations.

I have 10 inputs in my webpage, out of which 4 inputs requires date
What you should be doing for a date input is using the date input type. This gives you a semantically correct form.
I have my own custom calendar
Write your own polyfill for the date input type, overriding whatever you need.
Reusability of repeatable code in html
In the general case, consider using Web Components. https://www.webcomponents.org/ This is a newly revived standard around reusable HTML, and works much the same way a lot of front-end frameworks do.

Related

Making a custom form control field required

I build a custom form control composed of 3 mat-select as shown on the following demo:
Stackblitz
I want to make only month and year field required and make the day field optional in this form control. The examples are generally apply the required to all the components in that user control. But instead of applying to all of 3 select lists, I just want to make required 2 fields of them.
So, how can I do this?
If it's possible, you should use angular forms in the DateSelect component as well and pass the value of the form to the onChange function. This way you have control over every input field individually. Mixing angular forms and binding can unnecesarily complicate things.

mat-select for date (day-month-year) selection?

I want to implement a date field using 3 mat-select components. How should I fill the day, month (by number) and year fields? I think I should use a constant values on a ts file and use these values instead of keeping them in a database table. Am I wrong? And is there a proper example for this kind of usage?
Note: For some limitation I need to use mat-select instead of mat-datepicker. For this reason please give your suggestions based on mat-select approach.
As of your limitations, I've created one reusable component for you at
StackBlitz.
Using this control you can do two-way data (Date) binding.
And you can customize it with your own design choice.
Use of the component is also demonstrated.

Customising Symfony2 CollectionType Form field display

I've been experimenting with Symfony forms for some time. Without a doubt Symfony's FormType is a great feature which help create robust forms, especially with related entities (eg. ManyToMany, OneToMany etc.). The FormType makes my job a lot less complicated and easy when it comes to persistence. One of these case is the embedded forms, where u have multiple(lets say Category and Tag) entities with ManyToMany relation. Using FormType, I can create a 'Select dropdown' field using ChoiceType form field to choose category from, embed another CollectionType field with multiple 'text input' fields to accept multiple tagname, and finally a submit button. All I need is to add the cascade = {persist} option using annotations on the categoryname property of the Category entity and Wallah!
Now what if I wanted to create a single input field which can accept multiple tags, instead of having multiple input fields. Like this:
To do this I can create an <input> element using CollectionType form field, and then in my html.twig I can insert the javascript(jquery/AngularJS) dependency as attributes.
This can be done by using jquery Chosen or Select2 https://www.sitepoint.com/jquery-select-box-components-chosen-vs-select2/
or by using AngularJS ngTagsInput component http://mbenford.github.io/ngTagsInput/
Not just this particular case, I know that jquery delivers almost everything u want to do on the client side, and works good with Symfony, but I've been looking into AngularJS for some time now and it is undoubtedly true that it is further a step ahead of jquery or any other javascript framework. Thus my opinion is a little biased towards AngularJS.
The thing is, jquery(Chosen/Select2) uses <select> element and the AngularJS(ngTagsInput) uses custom <tags-input> element to display this field. Although with AngularJS I can make some elementary changes and convert the <tags-input> element to <div ngTagsInput> but I can't convert it to <input ngTagsInput> because the standard HTML<input> element has no closing tag, thus many features like auto-complete don't work. Customizing ngTagsInput & autoComplete directives (AngularJS)
Problem: For Symfony to persist the CollectionType field input in the standard way I need to use the <input> element to display the field.
Questions:
How do I make this work?
How compatible are Symfony and AngularJS? And is it recommended to use them together?
All help is appreciated.
Thanks in advance!

formatting form input field unbinds my ng-model

I have a form that i am trying to submit with angular JS
One of the field requires generation of an ethiopian calendar , so i am using an external javascript library to show this date - available here http://keith-wood.name/calendarsRef.html
To show the date picker one creates an input text as below:
<input type="text" id="ethiopianDOB" ng-model='Ethiopian'
And corresponding javascript
$( "#ethiopianDOB" ).calendarsPicker({
calendar: $.calendars.instance('ethiopian')
});
However this interferes with my ng-model binding and hence cannot access my variable in $scope (I reviewed the object on form submission and i have no item like $scope.Ethiopian
I am looking for ways to either
1. Retain the binding of the ng-model OR
2. Not require the javascript to instantiate the calendar OR
3. Improvement on my approach to this problem
Thanks
You should not mix JQuery and Angular if possible. Try to 'think in angular' instead of falling back on JQuery.
Here is a great post about this topic: "Thinking in AngularJS" if I have a jQuery background?
That being said, you should try to replace the JQuery calendar with an angular directive such as the datepicker from Angular UI Bootstrap. I don't know if they have an Ethopian calendar but you could always build your own.
This would fix your issue.
Hope this helps.

The best validation library technic

I want to write a plugin to validate forms. I have made detailed research about that but I want to write it with my own way. I dont want to write so many lines of code when using the library. It should be easy to use.
I found a jQuery library for validation. It uses HTML classes. For example if you want to a field with presence validation you just add the field required class done but I am not sure this is this is clear way. So I am confused with this, so anyone can tell me which is the best way to write a form validation library?
Actually the I found the jQuery validation plugin way is a very nice of dealing with validation logic. Here are some my reasons for it..
Its un-intrusive. You need no extra
markup on your form elements.
Used by many other plugins so
replacing one with a better one
should be relatively simple
Elements having same class will get
same validation logic and chance of
missing is rare (all date elements
will get same date logic, although
you can easily override)
You can use the same class to add
extra logic and same UI look and feel
(obvious) too and you are sure that
they all behave the same. (I add a
jquery rule to make all date elements
has a date picker too)
Adding and removing rules can be done
relatively easy with out change to
your markup.
I the method you describe is a good one. You can easily query anything with a class of "required", determine its type and check for a selected value. You can do this for all input types.

Categories