Develop Reference

Disable radio buttons in reactive form based on function value in Angular

I have an input made up of radio buttons, but I want to disable some of them based on a function value (which depends on the component's input). If I try to do this, I get a warning about using disabled attribute in a reactive form.
<div *ngFor="let option of options">
<p-radioButton [inputId]="option.id" name="option" [value]="option" formControlName="option" [disabled]="foo(option)"></p-radioButton>
<label [for]="option.id">{{ option.name }}</label>
</div>
Using the warning's suggestion, I am supposed to use a FormControl and set its disabled to true/false, but I'm not sure I understand how I would be able to do this with my radio buttons.

Maybe you can try [attr.disabled]="foo(option)".
Also, if you prefer changing at the typescript code, there is a discussion about Disable Input fields in reactive form that I think maybe can help you.

Angular 2 2 way data binding on 2 inputs not working

Hello i have this code:
<input type="radio" value="{{commencementDate.value}}" id="bankCommencementDateSelect" formControlName="bankCommencementDate">
<input #commencementDate id="bankCommencementDateInput" formControlName="bankCommencementDateInput" type="date" format="DD-MM-YYYY" min="{{ today | date: 'y-MM-dd' }}"/>
The value of the date input is being put into the radio input however when i save the form the value is not saving and is causing a error on the required validation on the radio input.
What i want to happen is whatever value is in the date input is set to the value of the radio button so when its saved it works but i ave tryed a few other ways and nothing seems to be working.
Any help would be amazing thanks!

Since you have a formControlName, the correct way to get the value is like this :
<input type="radio" [value]="myForm.get('bankCommencementDateInput').value" id="bankCommencementDateSelect" formControlName="bankCommencementDate">

The best way to set value in Angular reactive from is from a class component using setValue or patchValue.
You can write a function which set value(using patchValue) from a class component on keyup event.

How do I Add multiple conditions to either form ng-submit or Textbox ng-enter

In my JSP code, I try to use ng-submit on a form.
The problem is that there are many validations for the textboxes of that form which are implemented using ng-disabled in Submit button.
Now if I click enter key on a textbox then those validations will not be implemented and the form will be submitted.
How can I add the conditions here?
The only option I could think is to move all the conditions of ng-disabled to Javascript function.
<form name="customersForm" ng-submit="findCustomers(custName, custCity)">
<button type=submit **ng-disabled="validateInputs(custName,custCity)"**
id="listButton" ng-click="findCustomers(custName,custCity)"><span>Find </span></button>

Add the novalidate attribute to your form and add the required attribute to your form elements. From there, you can play with the validation of your form with the ng- directives. The form wont be submitted until all the fields are properly filled.

Using javascript/jquery, how to validate if at least 1 checkbox in spring's form:checkboxes is checked?

I am using spring's tag in my html. My jsp has a group of checkbox which renders value from model object "allTimeslots". This object has list of string.
form:checkboxes element="li" path="timeslotId" id="checkbox" type="checkbox"
items="${allTimeslots}" /></td></tr></table>
Now, my requirement is to check if atleast one check-box is checked when the form is submitted. I am using jquery validation where this check has to be done.
I cannot use type="checkbox" as this is not permitted in spring's tag.
Please suggest.

<form:checkboxes element="li" path="timeslotId"
items="${allTimeslots}" />
and in javascript
$('input[name="timeslotId"]:checked').length > 0
will do the work.

input type disabled and readonly behave differently with a href

I have below code where i disable and enable a calendar clickable icon.
<p>
<label>
<input type="text" name="date18" id="date18" value="01/01/2012"
style="width:75px;" disabled/>
</label>
<a href="#" onclick="somecaledarrelatedstuff()" name="calid" id="calid">
<img src="icon-Calendar.jpg" alt="Click to pick a date from a popup
calendar"/>
</a>
</p>
When I add disable as above both the input field and the link to the calendar popup are disabled as well. But because the values of disabled elements are not submitted, I thought of making it read-only. However, the problem is that when it's read-only, only the input field is getting read only (not also the calendar pop up link) too, like using disable.
I know if I want to disable (just to prevent the user from editing) both input field and href I can use disabled and have a hidden input variable, and submit it and refer to that variable. But I was looking for an alternative way because I will have a lot of refactoring to do to my code if I introduce a new hidden variable.
Thanks.

If you want the input field to be disabled but still send its value upon submission of the form, you can use bit of JavaScript for that.
To achieve this, first add this bit to the <form> tag:
<form ... onsubmit="EnableInputs(this);">
Then add this JS function:
function EnableInputs(oForm) {
oForm.elements["calid"].disabled = false;
}
You can enable more elements like this, or all inputs using getElementsByTagName and looping over it.
This will just enable the element when submitting thus send its value.

Disabled does not submit values, but read-only does submit values.