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.
Related
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.
I am new to Jasmine and Karma
I am testing an AngularJS application using Jasmine+Karma
My Html looks like this:
<div id="form">
<div id="car-type">
<input type="radio" ng-model="$ctrl.carType" ng-change="$ctrl.onTypeChange()" name="carType"
ng-value="true"/>
<span class="label">Honda</span>
<input type="radio" ng-model="$ctrl.carType" ng-change="$ctrl.onTypeChange()" name="carType"
ng-value="false"/>
<span class="label">Mazda</span>
</div>
</div>
However, when I try getting the value of the model bound to the input radio button, true is returned (because of ng-value I believe):
var wrapperForm = element[0].querySelector('#form');
// Returns true
console.log(wrapperForm.querySelector('#car-type input').value);
But, I want the model value bound to the radio button.
I don't know how to retrieve the model value bound to the radio button ($ctrl.carType).
Is there a way to retrieve it using the querySelector?
Can someone please help me out?
Yes:
document.querySelector("#car-type [type=radio]").getAttribute("ng-model")
However, you have two instances, you might want querySelectorAll instead.
I want to validate the inputs from a form in vuejs, and when the data is pre-populated I want the inputs to convert to readonly.
<input type="number" name="cf_962" class="form-control" v-model="fillProfile.cf_962" step="0.1" :readonly="(fillProfile.cf_962>0.00) ? true : false">
the problem with this now is that always that i writed on the input if the value is higher than 0 the input is readonly and i dont want that.. how can do that with vuejs 2?.. thank you.
What you are trying achieve can be done easily using v-once directive
<input type="number" name="cf_962" class="form-control" v-model="fillProfile.cf_962" step="0.1" :readonly="(fillProfile.cf_962>0.00) ? true : false" v-once>
As mentioned in docs
You can also perform one-time interpolations that do not update on
data change by using the v-once directive, but keep in mind this will
also affect any other bindings on the same node
v-once will let you set readonly for the inputs having pre populated data, and not readonly for the inputs which are not pre populated. This thing will happen only once so next time you write on the input it will won't affect the readonly anymore.
I have a form in angular and having some input boxes, checkbox and a submit button.Initially Submit button is Disabled.
If I change any element from that form then the submit button become enable.
I am making use of angularjs feature .$pristine and $invalid for that. It is working fine for input boxes but not working for checkbox change.
Am I doing anything wrong? kindly guide me.
See the fiddle :FIDDLE
You need to add an ng-model for checkbox
<input type="checkbox" ng-model="val" required />
Working Demo:http://jsfiddle.net/7qAqe/12/
"An input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control. The name attribute specifies the name of the property on the form instance."
- Forms Documentation
You did not bind the checkbox input to any model.
Refer to this demo
<input type="checkbox" required ng-model='rel.checked' />
I want to disable an input field, but when I submit the form it should still pass the value.
Use case: I am trying to get latitude and longitude from Google Maps and wanna display it, but I don't want the user to edit it.
Is this possible?
I wanna Disable an Input Field on a
form and when i submit the form the
values from the disabled form is not
submitted.
Use Case: i am trying to get Lat Lng
from Google Map and wanna Display it..
but dont want the user to edit it.
You can use the readonly property in your input field
<input type="text" readonly="readonly" />
I know this is old but I just ran into this problem and none of the answers are suitable. nickf's solution works but it requires javascript. The best way is to disable the field and still pass the value is to use a hidden input field to pass the value to the form. For example,
<input type="text" value="22.2222" disabled="disabled" />
<input type="hidden" name="lat" value="22.2222" />
This way the value is passed but the user sees the greyed out field. The readonly attribute does not gray it out.
you can also use the Readonly attribute: the input is not gonna be grayed but it won't be editable
<input type="text" name="lat" value="22.2222" readonly="readonly" />
Input elements have a property called disabled. When the form submits, just run some code like this:
var myInput = document.getElementById('myInput');
myInput.disabled = true;