I have a form with an input field that requires two values for ng-model. One to set the input field to required, the other to store the value that is typed into the input field. I just tried around and I know that it's not possible to assign two different values to ng-model. I also tried using ng-model two times and it's working. I am wondering why? That would not be legitimate, right?
Here is my code snippet:
<div ng-controller="MyController as myCtrl">
<form name="myForm" novalidate>
<label>First Name</label><br>
<input class="myClass" type="myCtrl.mapType" name="req" ng-required="isReq" ng-blur="isReq=true" ng-model="myCtrl.details.firstname.value" ng-model="required">
<div ng-show="myForm.req.$error.required" class="error">Field is required!
<label>Last Name</label><br>
<input class="myClass" type="myCtrl.mapType" name="req" ng-required="isReq" ng-blur="isReq=true" ng-model="myCtrl.details.lastname.value" ng-model="required">
<div ng-show="myForm.req.$error.required" class="error">Field is required!</div>
<button class ="button" ng-click="myCtrl.save()">Save</button>
</form>
</div>
Can anyone explain? If I do not provide the first name in the input field and click into the second input field, the error message is displayed correctly. And once I save the form, the given data is also saved correctly despite the two ng-models.
Basically it binds value with very first ng-model. There might be something you are missing.
<input class="myClass" type="myCtrl.mapType" name="req" ng-required="isReq" ng-blur="isReq=true" ng-model="myCtrl.details.lastname.value" ng-model="required"><br>
first ngModel: {{myCtrl.details.lastname.value}}<br>
second ngModel: {{required}}
Related
I have these inputs that take the values of a from a in my table when I click on a row. I want to make it so that the user cannot change the input themselves but want to bring values into them when a user clicks a table row. I will be passing these inputs in as a form. I know that when the input is like this:
that it will not be updated. Is there any other way to do it with an input. Is there a different type of tag I can use that can be passed through a form?
Rather than a read-only <input>, I'd go with a combination of a display element and a hidden form element. Something like:
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="hidden" />
And in the code update both:
$('#my-display').text(yourValue);
$('#my-input').val(yourValue);
You can style the display to the user however you like and don't have to worry about whether or not it "de-activates" the form input.
If you really want it to be an inactive input, you can use the same approach:
<input class="my-input" type="text" disabled />
<input class="my-input" type="hidden" name="my-input" />
Which may even save you a line of code here, since both can now use .val():
$('.my-input').val(yourValue);
Try disabled keyword as here
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="text" disabled/>
You can change the value by javascript as below:
document.querySelector('#my-input').value = 'the value you want to enter by javascript';
As I am pretty new to Web Development this might be an easy question.
In my HTML file I use the form method GET to parse data with the URL (it must be done this way, cannot be changed).
In this html there is a Text Field.
<div class="form-group {*if $ERROR_BEMERKUNG*has-error*/if*}">
<label for="text-comment">Bemerkung</label>
<textarea name="text-comment" id="text-comment" class="form-control" rows="3" placeholder="{$TRANSLATE.USERDATA.BEMERKUNG|default:'USERDATA.BEMERKUNG'}">{$COMMENT}</textarea>
</div>
How can I get the inside of this textfield, whatever is written in it afterwards, into my GET method? Hardcoded it works that way, but I don't know how I can get the value out of the div.
<input type="hidden" id="bemerkungen" name="bemerkungen" value= "TEST" />
EDIT: I didn't have to do anything for the textarea, it got parsed correctly.
But I have another div with a number field.
<div class="width115 left form-group has-feedback">
<span id="personen"> Anzahl Personen </span>
<input class="btn-input-wrapper" id="personen" type="number" min="1" value="1"/>
</div>
The value out of there is never parsed.
If by textfield you mean textarea, here's your answer:
All details you have in w3schools:
https://www.w3schools.com/tags/att_textarea_form.asp
Example:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_textarea_form
When you send example, it will show you generated GET link with textarea value.
You missing form="usrform" part tho, but it should work if you keep everything between <form> tags.
I am dealing with two versions of a page. The first one has a search input field as part of a form, and I can get that value no problem with
document.getElementsByClassName('search-input')[0].value
i.e. this will update as it's being typed. On the other version of the page (which I have no control over) the input field is not part of a form, and now the above code doesn't work (the class of the input field is still "search input").
Here is the html where it's working fine:
<form action="search-landing.aspx" method="GET">
<input class="search-input" autofocus="autofocus" placeholder="City, State or Zip" name="location" required="">
<button id="searchButton" tabindex="0" class="search-btn" type="submit">Search</button>
</form>
And here is the code where it's not
<div class="search-box">
<input type="text" class="search-input" placeholder="City, State or Zip">
</div>
Does anyone know why I'm having this issue? Is there a way around it (i.e. to grab a value from an input field that is NOT part of a form)?
Thanks
Rooster correctly pointed out that I may have more than 1 input field of class "search-input". There were two identical fields, one hidden so document.getElementsByClassName('search-input')[1].value was the answer in this case
Say I have the following form:
<form>
<input type="text" required ng-model='myValue' ng-maxlength='5'></input>
{{myValue}}
{{myValue.length}}
</form>
When the length of the text in the input exceeds the maxlength, the model becomes empty. Is there any way to prevent this behaviour while applying this validation, without rolling a custom form level validator?
at first, input element no end mark(</input), the correct like this:<input name="test" type="text"/>
you can handle form.test.$error.maxlength to deal something, example code:
<form name="form">
<input name="name" type="text" required ng-model='myValue' ng-maxlength='5'/>
<div>value:{{myValue}}</div>
<div>length:{{myValue.length}}</div>
<div>validate:{{form.name.$error.maxlength}}</div>
</form>
According your means, the invalid value lead to null model, I think this is no problem.
I am trying to add red frame to a field in a form in angular.
When working with static fields (not populated with ng-repeat) everything is working good. When the field is created with ng-repeat looks like the ng-class that uses the current index is not working. The form state is correct but the class with the red frame is not added to the field.
See this Plunker: http://plnkr.co/edit/hDfTHY?p=preview
When adding a value to all input fields the button become enabled. However, only first input is red when empty.
Thanks
One option is to add inner form:
<div ng-form="nested" class="col-md-4" ng-class="{'has-error': nested.item.$invalid}">
<input type="text"
ng-model="item"
class="form-control"
name="item"
id="item{{$index}}"
required ng-minlength="2">
</div>
See this question