I am working on an Angular 2 project, where I am using forms and validation and have come to the following problem. I have a page with 3 fields:
height
weight
BMI
I would like ALL 3 fields to be in my form so I have done the following:
<input name="height" type="text" class="form-control" formControlName="height">
<input name="weight" type="text" class="form-control" formControlName="weight">
<input name="bmi" type="text" class="form-control" formControlName="bmi">
So far this works fine. Although, I want BMI calculated automatically. I have a function detecting changes on the two fields (height and weight) and calculates the BMI and outputs it in the BMI input field. This works as intended as well.
HOWEVER, I would like to disable the BMI input field in order to prevent the user from being able to type anything. So I have the 3 following criteria:
The input field here meant to serve as a read only field for the user.
I also want the BMI to be part of formgroup which I send to my database when all 3 fields are valid.
(optional, but very much wanted) I want the BMI field to be an input field with the result from height and weight as I have implemented it, not as plain text.
I have tried putting a [disabled]=true tag on the BMI input field which doesn't work and gives me a warning that I should add the disabled tag in the formgroup. When I do this or use this command: this.myForm.controls['BMI'].disable(); it DOES disable it as intended, but also removes it from the formgroup. This means when I submit my formgroup only the value of height and weight is sent, bmi is left out.
How can I do this?
Any help is greatly appreciated!
Have you tried placing a readonly attribute on the input?
<input name="bmi" type="text" class="form-control" formControlName="bmi" readonly>
Are you using some kind of UI framework at all?
http://semantic-ui.com/collections/form.html#read-only-field
formGroup.getRawValue() will return even the disabled fields,
Source
Related
I have to implement validation in angular js. The requirement is, there is a form containing an input field which can contain only 9 digits.Below that input field there are three radio buttons. Now, upon form submission, i have to check whether the input field is valid(containing 9 digits) if the user has entered data into the input field and also if the user has not entered any data into the input field, a validation message should appear instructing the user to select any one of the below options(radio buttons).Since am a novice in angularjs , can someone tell me how should i implement this in angularjs.
Example Code :
<input type="text" inputmode="numeric" id="someNumber" name="someNumber" ng-maxlength="9" ng-model="vm.someFileNumber">
If you don't have SomeNumber, then please answer the following
<input type="radio" ng-model="vm.option1">
<input type="radio" ng-model="vm.option2">
<input type="radio" ng-model="vm.option3">
You need to set common name to your radio-buttons and set attribute ng-required="!vm.someFileNumber" to one of them
I have the following code :
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" onChange="ajaxrequest_provideProductListOnHit('protected/snippet/snippet_provideProductListOnHit.php', 'ajaxOnProductHit'); return false;" required="required" autofocus />
The problem is that :
The autofocus is not working, I'm using it in this input box only.
Actually the purpose of this input box is to get the field autofocussed so that a barcode scanner could input the productCode.
Now as you can see, my onChange event handler is not going to work here since the barcode scanner apart from the product code, inputs too.
So I need a solution here which autofocuses and once the barcode scanner inputs value in the field, calls for the mentioned ajax function.
html:
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" required="required" autofocus />
js:
var pc = document.getElementById('productCode');
pc.onblur = function () {
ajaxrequest_provideProductListOnHit(
'protected/snippet/snippet_provideProductListOnHit.php',
'ajaxOnProductHit'
);
}
pc.focus();
i use onblur, because onchange would trigger after EVERY change you make (e.g. typing into the text-field will trigger after every key).
you could also provide some custom-logic, e.g. recognize a certain length
Yes you where right, the problem was that I was using autofocus on a different preceding form field which made this particular field of this particular form non-autofocus. So I learned that in a page with multiple forms loaded in to the DOM, only the first one with auto-focus will work. Fool of me to think otherwise.
I have a magento store.
I have a textfield on every article site (http://www.lettershop.it/de/din-l-mailing-13.html):
"Anzahl"
How can I do that the field length is maximal 5 character?
You can add the html attribute maxlength="5" to the input tag.
This can be manipulated with browser tool, but nobody will probably do this.
But if you want to be 100% sure, you also have to check it serverside with PHP.
You will need an observer for this.
Edit:
To add maxlength attribute to custom options field:
Copy
app/design/frontend/base/default/template/catalog/product/view/options/type/text.phtml
to
app/design/frontend/[your_package]/[your_theme]/template/catalog/product/view/options/type/text.phtml
Search for <input type="text" onchange="opConfig.reloadPrice()" ... />
and change this to
<input type="text" maxlength="5" onchange="opConfig.reloadPrice()" ... />
This will add maxlength to all custom options of input type text. If you want this for only specific custom input text fields, use if/else logic within template file.
I'm working on an admin where users can add X amount of cells. Each cell consists of:
name
imageURL
destination link
User can bulk add cells (starts with 8, they could add 20 at once) or one at a time.
I need to validate each field to confirm that they are good. I had planned on using angular form validation for this. Unfortunately there is the requirement which states that should the user have X # of items, but only filled in half (leaves any entire cell empty) just disregard that cell as a whole.
The problem lies in that if there are 10 cells on load, the form (holds all the cells) is pristine / invalid. I fill in all 10 items, form is now dirty / valid. I add 5 more, form is dirty / invalid. fill out 2 of those cells and want to submit, form is still dirty / invalid when I would want it to be dirty / valid
Any thoughts on this?
Example plunkr: http://plnkr.co/edit/qwObH5LnxLvgJydJlJVS?p=preview
Bonus points on if I can do this without having to use a form tag.
It sounds like you want empty rows to be valid, but empty input fields in a non-empty row to be invalid.
To achieve this, you can add conditional requirements to each field using ng-required, so that it is only required if there is at least some text elsewhere in the row.
From your plunkr, you can replace required with ng-required on each input:
<li ng-repeat="cell in cells">
<input type="text" name="dest" ng-model="cell.dest" placeholder="Destination Link" ng-required="cell.src || cell.name"/>
<input type="text" name="src" ng-model="cell.src" placeholder="Image Link" ng-required="cell.dest || cell.name"/>
<input type="text" name="cellName" ng-model="cell.name" placeholder="Name" ng-required="cell.src || cell.dest"/>
</li>
To improve scalability, you could also define a method on the cell objects or the controller to evaluate whether a cell object is blank:
function cellCtrl($scope) {
...
$scope.isBlankCell = function(cell) {
...
}
}
and call that method from the template:
<li ng-repeat="cell in cells">
<input type="text" name="dest" ng-model="cell.dest" placeholder="Destination Link" ng-required="isBlankCell(cell)"/>
<input type="text" name="src" ng-model="cell.src" placeholder="Image Link" ng-required="isBlankCell(cell)"/>
<input type="text" name="cellName" ng-model="cell.name" placeholder="Name" ng-required="isBlankCell(cell)"/>
</li>
I saw your example on plunkr.
Adding a delete button, the user can delete the rows that do not want to fill. So the form comes back to the dirty/valid state.
I have following HTML code. writer input field is text filed. but I want to pretend that one is password field. whenever someone type anything, one key will display as * only, as you know how password field show; additionally the entry at writer input field should be populate in holder value which field is hidden. Can you please write in simple java script coding.
Password: <input type="text" id="writer" value=""/><input type="hidden" id="holder" value=""/>
This one show http://www.symplik.com/password.html, whatever we enter, it doesn't look good, it should be all * only when you start typing in it.
Simply use <input type="password" id="txtPassord" value=""/>