I am using angular 5
In my html I generate the value of a input field using
<input type="number" class="form-control" id="unitCost" name="unitCost" [(ngModel)]="unitCost" placeholder="Average Unit Price">
document.getElementById("unitCost").value = avgVal;
then I want to retrieve that generated value in my component.ts using
this.unitCost = form2.value.unitCost;
But it returns null value. instead if I type any value in the text field it works fine and returns the value I typed. Can I solve this issue?
the best way to achieve what you want is
<input type="number" class="form-control" id="unitCost" [(ngModel)]="unitCost" placeholder="Average Unit Price">
now in your component class you will have a variable called unitCost and you can get or set the value of the text field like this
setting value - unitCost = 'value'
gettingValue - unitCost
let me know if this is clear or i will create an example for you
Use [ngValue] directive of angular.
Related
I have the following HTML Angular tags, which need to trigger a validation error when there is a negative value entered in any of the groups of textboxes (dynamic array).
<tr *ngFor="let order of configWT.get('wtFormArray').controls; let i =index" formArrayName ="wtFormArray">
<input natinput type ="number" [formControlName]="i" id="wtage" ngModelChange="updateWTage(i)" required>
ngOnInit
ngOnInit():void
{
this.configWT = this.formBuilder.group({
wtFormArray: new FormArray(['',[Validators.min(0)]])
}
Here is the error condition which is working for required validation, but not working for min validation.
Working
<nat-error *ngIf="configWT.get('wtFormArray').at(i).hasError('required'))"
error test
<nat-error>
Not Working
<nat-error *ngIf="configWT.get('wtFormArray').at(i).hasError('min')"
error test
<nat-error>
Here is the DOM
I am feeling like I am comparing min value with an array which may be causing this problem? please help!
I think, you should use minlength for minimum validation, it will be easier, because for new FormArray it's not correct to add validation in such way
<input natinput type ="number"
[formControlName]="i"
id="wtage"
ngModelChange="updateWTage(i)"
required
minlength="4">
<nat-error *ngIf="configWT.get('wtFormArray').at(i).hasError('minlength')">
error test
<nat-error>
I am able to create an input field with a datalist in html5 with Reactjs. The reactjs code looks like this:
const Container = props => {
const countryList = props.countries.map(c => <option key={c} value={c} />);
return (
<div>
<input list="countries" name="Country" />
<datalist id="countries">{countryList}</datalist>
</div>
);
};
This code is proved to work properly, say the input field is there and if user type something in the field, relevant list will show. The problem is that the input field is empty without any label. So an indicator for telling what the field is about is needed, for instance, a label can be added to the left side or the top of the input field, but this would take more space on the page.
Therefore, I would like to add some light-colored text indicator/label inside the input field, and when user click this input field, the text indicator would disappear and the user can insert value and also get data list
Anyone can give some suggestion on how to achieve this goal?
<input list="countries" name="Country" placeholder="sometext"/>
I am not quite sure how to bind a variable from my component class to a property value in my form object. The form needs to display this value and add it to the ngModel so that it can become part of the object instance.
I am struggling with the syntax and keep getting the errorNo value accessor for form control with name: 'per_print'
Error: No value accessor for form control with name: I think I need to use the [(ngModel)]="myObject.property" syntax, but I am not getting this from an input into the form, but from a binded variable on the class.
<div class="form-group">
<label class="label-text" >Per Print</label>
<div class="input-group" style="width:150px;">
<h4 [(ngModel)]="job_entry.per_print" name="per_print"
value='pricePerPrint' class="form-control"
>
{{pricePerPrint | currency:'GBP':true:'1.2-2'}}
</h4>
</div>
</div>
job_entry is my object which properties I am setting through the form. pricePerPrint is a variable on the class. I want to set this variable to one of the form instance properties. How to do this? I thought I could do it through value, as in the value of the <h4> tag, but this error persists.
You could use [hidden] input field with the value you want, so that this value will be added to your form. This means though, that you need to use pricePerPrint as the ngModel. But ngModel for your job_entry is possibly not needed. You could build the form as such, so that the object you get from the form can be assigned directly to job_entry:
onSubmit(obj) {
this.job_entry = obj;
}
Also check the Demo for that.
So your code would look like this:
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
<input [hidden]="isHidden" name="per_print"
[(ngModel)]="pricePerPrint" [value]="pricePerPrint"/>
<h4>Price: {{pricePerPrint}}</h4>
<button type="submit">Submit</button>
</form>
where isHidden is set to true.
Other option I see, if you want to use [(ngModel)]="job_entry.per_print, you need to assign whatever value you have in pricePerPrint to job_entry.per_print.
I have here a html text box. It has an ng-model and an initial value on it. The problem is the initial value is not shown when there's an ng-model present and I need both of the ng-model and the initial value for the textbox.
HTML:
<input type="text"
ng-model="selPcode"
name="missionId"
value="123">
JS:
$scope.setPcode = function(site){
$scope.selPcode = site.id};
Can anyone suggest a way how to make the value show in the text box and keep the ng-model present? Thanks in advance.
Set an initial value to the ng-model on your controller's scope. Something like $scope.selPcode = 123. Set it to what your value would have been. That way, it'll display initially and then you can also change it.
Well, Angular works with two-way data binding, so why not simply set the initial value in your controller?
$scope.selPcode = 123;
This way, you'll see it in your input.
Use ng-init without having to touch the controller and keep the code in the HTML readable, like you would with the value= syntax for the standard use of the Inputbox. Plunkr here
Example Here (Controller As Syntax):
<div ng-controller="myController as my">
<h1>Hello {{my.name}}</h1>
<input type="text"
ng-init="my.selPcode=123"
ng-model="my.selPcode"
name="missionId">
</div>
Controller:
myApp.controller('myController', function($scope) {
this.name = "Gene";
});
I try to pass the next form by clicking the 'submit' button (I checked the all 2 fields):
<form id='contact-form' name='contact-form' method='get' action='/3/'>
<input type='checkbox' name='v[]' value='1'>
<input type='checkbox' name='v[]' value='2'>
<input type='submit'>
</form>
In my view I output all received variables (using Django framework):
#template
def view3( request ):
print "request={0}".format( request.REQUEST )
...
I got only the last variable in output:
request={u'v[]': u'2'}
Is it something wrong with the snippet of html?
Additional Info. The html containing the form is in a frame on another html page.
Python's dictionaries only allow one value per key, therefore Django offers a special type for this case, a QueryDict. To obtain a list of values coming from an input array, you need to call getlist on it:
v = request.GET.getlist('v')