I'm using ui-bootstrap-datetime-picker with angularJS. And i'd like to know if it's possible to set show-meridian options of time-picker directly inside timepickerOptions ?
...
<input type="text" class="form-control"
datetime-picker="MM/dd/yyyy HH:mm"
timepickerOptions="{'show-meridian': 'false'}"
ng-model="ctrl.date.value"
is-open="ctrl.date.showFlag"/>
<span class="input-group-btn"></span>
...
This is a plnkr which illustrate the problem.
Root cause of the problem is wrong naming style. To make your code work, you have to change camel-case to dash-delimited: timepicker-options instead of timepickerOptions (see my forked plunker):
<input type="text" class="form-control"
datetime-picker="MM/dd/yyyy HH:mm"
timepicker-options="{'show-meridian': false}"
ng-model="ctrl.date.value"
is-open="ctrl.date.showFlag"/>
The key point here is normalization process being done by AngularJS. Since HTML is case-insensitive, AngularJS cannot convert HTML attribute named timepickerOptions into scope variable timepickerOptions - because timepickerOptions in HTML is seen by AngularJS exactly like timepickeroptions; so, there is no chance for it to determine how to normalize this name. Thus, you should always use -, _ or : to delimiter different words in directive name when using HTML.
Related
I have - again - a case where I need to put a lot of fields in a partial view in order to be able to add dynamically this partial view in a form.
Up to now, I always made my html markup by hand, so the file looks like:
#{
var collectionId = $"Collection[{Model.CollectionId}].{{0}}";
}
<label for="#(string.Format(collectionId, "FirstName"))">#ApplicationResources.FieldFirstName<span style="color:red"> *</span></label>
<input class="form-control"
data-val="true"
data-val-required="#(string.Format(ApplicationResources.Error_Required, ApplicationResources.FieldFirstName))"
id="#(string.Format(collectionId, "FirstName"))"
name="#(string.Format(collectionId, "FirstName"))"
type="text"
value="#(string.IsNullOrWhiteSpace(Model.FirstName) ? string.Empty : Model.FirstName)" />
<span class="field-validation-valid text-danger"
data-valmsg-for="#(string.Format(collectionId, "FirstName"))"
data-valmsg-replace="true"></span>
And it works well:
If error in post, I can show back the data - they are not lost
I can also display (with edition) previous saved data
But, I have to do all the html markup manually, for every imaginable input type...
So, my question is to know if it is possible to achieve the same html output through #Html helpers (Html.TextBoxFor (or TextBox), DropdownFor, CheckboxFor, ValidationMessageFor etc.), as everything I tested at this point doesn't work for viewmodel's attributes validation?
I am using IntelliJ, it understands, that {{foo}} is an interpolation in the formControlName-attribute. But in the name attribute it does not. IntelliJ thinks in the name-attribute, that {{foo}} is an array and that I am missing a : Like in {foo : bar}.
The code compiles just fine, is this an IntelliJ-Bug or am I just lucky that the compiler accepts it?
<input type="radio" name="{{foo}}" formControlName="{{foo}}">
Angular definitely allows interpolation in attributes, but the generally prefered method (mostly for read ability) is property binding. name="{{foo}}" <=> [name]="foo" more info here
So your provided code
<input type="radio" name="{{foo}}" formControlName="{{foo}}">
becomes
<input type="radio" [name]="foo" [formControlName]="foo">
and this should make IntelliJ stop complaining.
I need to create a registration form in HTML which has a password input with the following constraints:
Is a mandatory field, should be validated. Minimum of 7 characters. Should have at least one special character and one number. Do not use java script, use HTML 5 features.
I have written the following code to for the above input:
<input type="text" name="password" pattern="(?=.*\d)(?=.*[\W_]).{7,}" required>
I need to submit this code as part of an assignment and I get the error:
Correct HTML Component with the name 'password' must be used with appropriate constraints
which means I am not using the correct attributs.
What changes should I make to the pattern attribute?
This code works perfectly with validation message
<p>Password: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[\W_]).{7,}" title="Minimum of 7 characters. Should have at least one special character and one number."></p>
try it here :
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern3
I think this will work.
Password:<input type="password" name="pw" pattern="^(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!#$%^&*-]).{7,}$" title="Minimum of 7 characters. Should have at least one special character and one number and one UpperCase Letter.">
Pattern attribute will also use a Regular Expression to validate your form-data.So for more results you can also search for Regular Expression
I am currently doing homework, and following the instructions the book gives me, but I can't get the required or pattern tags to work. I am creating a survey form, and trying to make an error come up when the user doesn't type in their name, receipt number, or email. Here is a portion of it.
<label for"receipt">Receipt number *</label>
<input name="receipt" id="receipt"
placeholder="re-nnnnnn"
required="required"
pattern="^re\-\d{6}$" />
A few things i see
the required attribute does not need a value, the existence of the attribute is what makes it required or not.
the - does not need to be escaped so use ^re-\d{6}$ for the pattern attribute
the issue with the notepad++ is that the language formatting/color-coding is not up-to-date with all the attributes.
<input name="receipt" id="receipt"
placeholder="re-nnnnnn"
required pattern="^re-\d{6}$" />
there is no need to write like that u can just write : required and it will work
and whats your pattern i don't catch that
I saw this on a question recently.
<input type="radio" mess="whats up" name="q1" value="A" class="correct"/>
I can't get what the mess attribute do, and I couldn't see any result on the internet. So what is the mess attribute for?
It can be called as custom attributes intended to store a piece of information (purely for developer puropse)but it not advisable.
Instead you can go for HTML5 custom data attribute like
data-mess="whats up"
It can be easily accessed with .data() in jQuery.
<input type="radio" data-mess="whats up" name="q1" value="A" class="correct"/>
See
$('.correct').data('mess') // to getch the value
$('.correct').data('mess', 'some value') //to update the value
FYI:*custom data-** is purely validated with w3c validator. Whereas not with yours.
There is no mess attribute, in the question he just used it to attr and get the value through JQuery.
For example:
checked = $('input:checked').attr('mess'); sets checked to whatever the checked input had on the 'mess attribute', as seen in the question.
Another example:
$('#BobDiv').attr('txt'); will return 'Bob' if your HTML is <div id = 'BobDiv' txt = 'Bob' />
As seen here, you have to amend it in your !DOCTYPE declaration, though.
It's just a way to store arbitrary data in the tag. It does whatever the programmer intends it to do. Some people prefer to add custom attributes via data-foo, others prefer this syntax.