Being very new to Angular I have a kinda unusual request.
I have a bunch of input fields
<div class="blurb" ng:repeat="item in fieldData.postData">
<input type="text" class="form-control" ng-model="item.key" />
<input type="text" class="form-control" ng-model="item.operator" />
<input type="text" class="form-control" ng-model="item.value" />
</div>
The values of these fields inturn are bound to another field
<input name="finalVal" type="text" ng-model="fieldData.postData" />
All works fine and I get an object inside finalVal, but I want the object in string format. Is there a way to achieve it without any changes in my controller? The reason being finalVal is basically stored as a string in DB and I cannot modify the data type.
Appreciate the help
Related
Here is my Code and so have many fields like this :
<input type="text" pInputText class="form-control" name="companyName" [(ngModel)]="company.Name" required #companyName="ngModel"
/>
<label>Company Name</label>
<p class="ui-message ui-messages-error ui-corner-all" *ngIf="(!companyName.valid && companyName.touched)">
Company Name is required
</p>
Instead of defining separate message for all mandatory/invalid fields, can't I use single message with place holder for field name? So whenever I want to change message, I can manage this with single line change.
e.g. "${field} is required, ${field} is not valid etc."
please give me a example if this can do
The first solution that crossed my mind was just wrap the error messages in a function:
var displayError = (field) => `${filed} is required`;
And on the HTML
<input type="text" pInputText class="form-control" name="companyName" [(ngModel)]="company.Name" required #companyName="ngModel"/>
<label>Company Name</label>
<p class="ui-message ui-messages-error ui-corner-all" *ngIf="(!companyName.valid && companyName.touched)">
{{ displayError('Company name') }}
</p>
I have multiple input fields under different headings:-
<label>User</label>
<input type="text" ng-model="a.arr.username"/>
<input type="text" ng-model="a.arr.userdob"/>
<input type="text" ng-model="a.arr.userpanNo"/>
<label>Employee</label>
<input type="text" ng-model="a.arr.empname"/>
<input type="text" ng-model="a.arr.empdob"/>
<input type="text" ng-model="a.arr.emppanNo"/>
<label>Daily Workers</label>
<input type="text" ng-model="a.arr.dwname"/>
<input type="text" ng-model="a.arr.dwdob"/>
<input type="text" ng-model="a.arr.dwpanNo"/>
I want to save above data in the format:- [{a.arr.username:any value,a.arr.userdob:any value,a.arr.userpanNo:any value},{a.arr.empname:any value,a.arr.empdob:any value,a.arr.emppanNo:any value},{a.arr.dwname:any value,a.arr.dwdob:any value,a.arr.dwpanNo:any value}].
In my directive:-
scope.a.array=[];
var properties = Object.keys(scope.a.arr);
for(var i=0;i<properties.length;i++){
scope.a.array.push({});
scope.a.array[scope.a.array.length - 1][properties[i]] = scope.a.arr[properties[i]];
};
But above code is creating data like this:- [{a.arr.username:any value},{a.arr.userdob:any value},{a.arr.userpanNo:any value},{a.arr.empname:any value},{a.arr.empdob:any value},{a.arr.emppanNo:any value},{a.arr.dwname:any value},{a.arr.dwdob:any value},{a.arr.dwpanNo:any value}]
It is pushing different properties in array instead of combining them. What is the correct way of doing this?
I am saving my data in below format
$scope.data = {
name:'abc',
Address:[{
Address1:'XXXX',
state:'XXXX',
County:'XXXX'
}]
}
<input type="text" class="form-control" name="Address1" ng-model="data.Address[0][Address1]">
<input type="text" class="form-control" name="state" ng-model="data.Address[1][State]">
<input type="text" class="form-control" name="County" ng-model="data.Address[2][County]">
While retrieving the data I am getting data in below format:
$scope.data = {
name:'abc',
Address:[{
state:'XXXX',
County:'XXXX'
}]
}
Where one of the array objects (Address1) is missing so I am unable to update the form model even if the data is available. Is there any workaround to solve the above issue?
Change your input model to index 0, because that's the array item you are targeting. After that change your reference to the . notation and not using brackets []. You can use the brackets, but make sure to make them strings, like data.Address[0]['Address1']. But it's not necessary here. Also:
<input type="text" name="Address1" ng-model="data.Address[0].Address1">
<input type="text" name="state" ng-model="data.Address[0].state">
<input type="text" name="County" ng-model="data.Address[0].County">
(removed class for simplicity)
(are you using state or State?)
It seems that the ngModel does not return anything at all when it's invalid.
I want to play with the value when only 2 or three characters is inserted!
<input
type="tel"
class="fullinput"
ng-model="xxxxx"
ng-minlength="12"
ng-maxlength="15"
required
/>
Just add name attribute to your form and to input. Then you'll be able to access needed value via:
in template {{myForm.xxx.$viewValue}}
in controller $scope.myForm.xxx.$viewValue
<form name="myForm">
<input
type="tel"
class="fullinput"
ng-model="xxxxx"
name="xxx"
ng-minlength="12"
ng-maxlength="15"
required
/>
</form>
Here is my code
This is static code.
<label for="lbitemname">Name</label>
<input type="text" id="lb-item-name" ng-model="lb.itemname1" />
These are dynamic, i.e they are added to DOM when I click add button on my page.
<label for="lbitemname">Name</label>
<input type="text" id="lb-item-name" ng-model="lb.itemname2" />
<label for="lbitemname">Name</label>
<input type="text" id="lb-item-name" ng-model="lb.itemname3" />
My problem is when I pass these values to controller.
lb.itemname2 and lb.itemname3 are undefined.