Hi I am trying to make one input form field required based on one boolean variable in my component.
Component:
public myDivHidden: boolean = true;
In my html
<form #railForm="ngForm" (ngSubmit)="executeRailForm(railForm.value);" *ngIf="railFormData" ngNativeValidate>
...
<div [hidden]="myDivHidden">
...
<div class="form-group">
<label for="myName">My Name</label>
<input type="text" name="myName" [(ngModel)]="railFormData.myName" required="!myDivHidden">
</div>
...
</div>
...
</form>
I am trying to avoid required if div is hidden and make it required if div is visible. I am getting error: An invalid form control with name='myName' is not focusable.
How I can make required field required when div is visible and not required when div is invisible in html page?
try [attr.required]="!myDivHidden" or required="{{!myDivHidden}}"
Related
html code:
<div id="1" class="grid-item"> <input type="text" size=1px value=""></div>
After entering the value in input section,i want to access the contents what i have enetered.
can anyone please help me in this question.
i didn't quite understand what you meant but i assume you meant the following ?
let input = document.getElementById('input')
let h1 = document.getElementsByTagName('h1')[0]
input.addEventListener('input', () => {
h1.textContent = input.value
})
<div id="1" class="grid-item"> <input type="text" size=1px value="" id='input'> <h1></h1></div>
Requires JavaScript or BackEnd But if you don't mind I will explain the javascript
...............
First, choose a unique identifier for your input, for example "MyInput":\
<div>
<input type="text" id="MyInput" value="">
</div>
It doesn't matter where it is ( form , input and ... )
Now let's go to JavaScript:( I attach it to a sticker )\
<a onclick=" alert( document.getElementById('MyInput').value ) "> Show Value Input</a>
You may not understand what this command is
I'm just referring to the onclick input
With the "alert" command the browser will show you something and if you know js, you know this
The document.getElementById command takes an ID and finds that tag, which you can access by typing a dot followed by the entry name.
For example, when you write something in your input, the input is a value and the fog is filled with that value.
From now on, every time you click on the a tag, you will be shown the input value
Complete code:
<div>
<input type="text" id="MyInput" value="">
</div>
<a onclick=" alert( document.getElementById('MyInput').value ) "> Show Value Input</a>
If you have any questions, send me an email:
amp.it.ir.go#gmail.com
;-)
I want to automatically fill the registration form fields on an HTML web page. The form has multiple input boxes. I want to define the value of fields and when the web page appears the fields fill automatically. Before, I used autofill extension for it. But, the autocomplete feature of fields has been off and HTML objects don't have names or ids. Also, they have the same class. Therefore, fields don't fill automatically. How I can fill fields on the webpage automatically?
for example, two input objects and some of codes have been defined as follow:
<input autocomplete="off" class="red" placeholder="" type="text">
<input autocomplete="off" class="red" placeholder="" type="text">
<div class="input-item" max-length="10" placeholder="ID" data-v-6b0449e1=""><label class="label"><i>*</i>ID:</label><input autocomplete="off" class="ltr green" max-length="10" placeholder="" type="text"><p class="errors"><ul></ul></p></div>
<div class="select-item" data-v-6b0449e1=""><label class="label"><i>*</i>Sex:</label><select><option hidden="" disabled="" value="">Select</option><option value="false">male</option><option value="true">female</option></select><p class="errors"><ul></ul></p></div>
If you're looking to fill the fields when the page loads, you can use JavaScript:
HTML
<form class="my-form">
<input type="text" id="input1" />
<input type="text" id="input2" />
<input type="text" id="input3" />
</form>
JavaScript
window.onload = function() {
document.getElementById("input1").value = "This is the first input";
document.getElementById("input2").value = "This is the second input";
document.getElementById("input3").value = "This is the third input";
}
All this does is just, when the page loads (window.onload), replaces the value of each of the specified input fields to whatever you set it to.
Consider an HTML input form with red error text that informs when field is empty. Notice it relies on ng-show=$error.required && $touched
<div class="form-group">
<div class="input-group">
<input id="qp-cargo-value" name="qpCargo" placeholder="$" type="text"
class="form-group" currency="229" data-ng-model="cargoValue" required>
</div>
<div class="rederrorlabel"
ng-show="myform.qpCargo.$error.required && myform.qpCargo.$touched">
Error - Cargo value is required
</div>
</div>
It works fine for fields without the ccy attribute. But for inputs with ccy, when the input is empty the default value stored in angular is not null but $, which fails to trip the $error.required condition
Here is console output for the value as I enter and then delete values, confirming that it never gets set to null but rather to "$".
Is there anyway to retain the ccy formatting but somehow still use $error.requried in an input field?
the standard seems to be to have an input prepend for $ and only take in the amount not the symbol.
Bootstrap EX:
If you prefer to leave it the way it is, you can write a method that checks for a valid entry returning a bool and use it for the ng-show.
public currencyValidation(): boolean {
return myform.qpcargo.value.replace('$', "").length < 1;
}
<div class="form-group">
<div class="input-group">
<input id="qp-cargo-value" name="qpCargo" placeholder="$" type="text"
class="form-group" currency="229" data-ng-model="cargoValue" required>
</div>
<div class="rederrorlabel"
ng-show="currencyValidation() && myform.qpCargo.$touched">
Error - Cargo value is required
</div>
</div>
I am trying to do the following :
<span *ngIf="heroForm?.dirty">
FOO
</span>
<form *ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
#name="ngModel">
</div>
</form>
Basically, displaying a span outside of the form tag, using the form states (here dirty). Unfortunately, FOO is never shown. Is there any way to work around this ?
Create a model property, showFoo: boolean
and change that on some form event, like onChange
then your span will look like
<span *ngIf="showFoo">FOO</span>
I want to perform this operation but value attribute is not working
<input name="grand_total" type="text" class="form-control" value="#{{sum(saletemp)*discount1/100 | currency: "৳"}}" />
<input name="discount" type="text" class="form-control" id="add_payment" ng-model="discount1"/>
Second question
If I want to send value from a P tag after html form submission, how can I do that and how can I retrieve that value?
I want to pass this value #{{sum(saletemp)*discount1/100 | currency: "৳"}} to my controller and want to store it into my database. Here is the code portion
<div class="form-group">
<label for="grand_total" class="col-sm-4 control-label">Discount</label>
<div class="col-sm-8">
<p class="form-control-static" ><b>#{{sum(saletemp)*discount1/100 | currency: "৳"}}</b></p>
</div>
</div>
You should use ng-model instead of dealing with the value attribute of input tag... That will provide you more flexibility for doing almost any kind of operation over it and accessing it in controller..
like ng-model="saletemp" will be available to you in controller as $scope.saletemp.. and if you want to call functions on some change in input tag value, you can simply call ng-change="functionName()" which you will have defined in controller as
$scope.functionName = function(){YOUR FUNCTION DEFINITION}
Here is the fiddle which will allow you to put the currency in input tag when ng-model is used. http://jsfiddle.net/arunpjohny/wNBAn/