We Keep Coding

Angular 2: Disable input field without removing from formgroup?

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

Submit HTML form and get radio button value without javascript or jquery

I am trying to implement Net Promoter Score survey through email body. As email clients don't allow Javascript. I want to submit the radio button value to a url that is defined in Form Action attribute.
But my question is how to know which radio button is checked, and how to submit it to a remote url ? and in which form will it be submitted ? i.e name value pair or how ?
Note: I know how Jquery and Ajax. I want to achieve same things without using Ajax or Jquery or Javascript

A standard HTML form submission should handle this fine
Make sure your radio buttons all have the same name attribute, and give them all a different value attribute
Include an input with type="submit" and the resulting form submission should have NameOfAllRadioButtons = ValueOfSelectedRadioButton
I don't think I've ever been sent an email with form inputs in the body, which probably means there are a lot of clients that don't support them at all. You might be better off sending a link to take the survey in an actual web page.

According to this article: https://www.sitepoint.com/forms-in-email/ you should be able to use a standard html form in an email. Outlook will display the form messed up though.
To get radio value, just do this:
<form action="/yoururl.php" method="get">
<input type="radio" name="question" value="answer1" checked> answer1<br>
<input type="radio" name="question" value="answer2"> answer2<br>
<input type="submit">
</form>
In your backend code, you will be able to do $_GET["question"] to get either answer1 or answer2.
On submit user will be redirected to another page and most client will probably ask for confirmation before redirecting.

How to enable HTML elements on submit

I have a checkbox and a few input elements related to this checkbox as shown below
<input name="balanceFeaturesOn" id="balanceFeaturesOn" type="checkbox" disabled="disabled" checked="" />Control
<input name="IntervalDays26566521" type="Text" onclick="" onchange="" value=" 31 ">
<input name="IntervalHours26566521" type="Text" onclick="" onchange="" value=" 12 ">
For some reasons, I will have to keep my checkbox always disabled.
On the submit of above form (Say that the checkbox and inputs are inside a form), in the server code, I want to grab the text inputs based on if the checkbox was checked/unchecked. However since the checkbox is disabled, the request parameter does not contain the balanceFeaturesOn property.
So when I execute the below line:
String[] balanceFeatArr = request.getParameterValues("balanceFeaturesOn");
I am not getting any value...
So my question is how do I be able to get the value of the checkbox while still keeping it disabled on the UI?

Try the following code,
In the form use javascript function to submit the form,
<input type='submit' onclick='javascript:submitMe()' />
Javascript function,
function submitMe(){
$('#balanceFeaturesOn').removeAttr('disabled');
$('#formId').submit(); //Replace with the actual id of the form
}
Make sure you have included jquery library in your code.

Use Hidden Fields.
Hidden fields are similar to text fields, with one very important difference!
The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field:
To submit information that is not entered by the visitor.
http://www.echoecho.com/htmlforms07.htm

Is there a way to allow a checkbox to be marked only if there is data entered?

I have an ng-repeater with each row having an input of type checkbox, as well as 3 text fields. I want to allow the checkbox to be selected ONLY if the user enters some text in each of the 3 text fields. If the user tries selecting a checkbox without entering data first, I want to display a warning message.
I am assuming I have to do some checking for the three ng-models (for text fields) is null or undefined or something, but not sure how to do it in the HTML.
My HTML looks something like this:
<div ng-repeat="o in objects">
<input type="checkbox" class="myClass" ng-click="doSomething(argument)>
....
....
<input ng-model="model1">
<input ng-model="model2">
<input ng-model="model3">
EDIT: Found an answer here AngularJS - Form Custom Validation - Check if at least one input is empty

You could disable them and use ng-change to monitor that all 3 of the text inputs have value.
Sample html:
<input type="text" ng-model="data.item3" ng-change="update()"/>
<input type="checkbox" ng-model="data.model1" ng-disabled="checksDisabled"/>
Example Controller
.controller('MainCtrl',function($scope){
$scope.checksDisabled=true;
var data = $scope.data ={ };
$scope.update=function(){
$scope.checksDisabled = !(data.item1 && data.item2 && data.item3);
}
});
DEMO

Simple Javascript coding for input text to password text

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=""/>