Develop Reference

How can I get form data and add it to an object in Angular?

I am using this form to take some basic information:
<form action="/action_page.php" method="GET" name="clientForm">
<label for="cname">Client name:</label><br>
<input type="text" id="cname" placeholder="client name:" name="cname" required><br>
<label for="clienturl">URL:</label><br>
<input type="text" id="clienturl" placeholder="url:" name="clienturl" required><br><br>
<input type="submit" value="Submit" button (click)="addClient()" >
<input type="reset" value="Reset">
</form>
This is the data i am currently holding:
export const clients = [
{
name: 'client1',
url: "https://www.google.com"
},
{
name: 'client2',
url: "https://www.yahoo.com"
},
{
name: 'ACB',
url: "https://www.dailymail.co.uk"
},
{
name: 'client3',
url: "https://www.youtube.com"
},
{
name: 'client4',
url: "https://www.nhs.uk"
},
];
Then in my component I am struggling to get the data entered into the form and add it as an object to the existing data.

If you use the Reactive Forms / Angular Standard Forms in your angular app, you can get it...
<form [formGroup]="FormName" (ngSubmit)="submit()">
in TypeScript:
this.FormName.value
For more details, see the official documents
By using the traditional way, you can add in to the object

AngularJS Filter table based on radio button combine with textbox

I'm new to angularjs here i want to achieve when i click one radio button the textbox should filter the table by specific column. when i click another radiobutton the textbox should filter the table by another column.For Example when i click "sficode" radiobtn the textbox filter the table based on sficode column and when i click Title/description it should filter according to that column "Desc".
<div style="width:250px;margin-left: 9px;">
<fieldset class="form-group">
<legend style="color: #424248;margin-bottom: 0px;">Search</legend>
<input type="radio" name="Search" id="rdoSfiCode" value="SfiCode" ng-model="filters.x">
<label for="rdoSfiCode">SfiCode</label>
<input type="radio" style="margin-left:5px;" name="Search" id="rdoTitleDisc" value="TitleDisc" ng-model="filters.y">
<label for="rdoTitleDisc">Tile/Discription</label><br>
<input type="text" style=" width: 200px;height: 25px;" id="txtSfiorDisc" ng-model="search" />
</fieldset>
</div>
<table>
<tr ng-repeat="corrItem in CorrItems">
<td >{{corrItem.SfiCode}}</td>
<td>{{corrItem.Tile/Discription}}</td>
</tr>
</table>
here is my json data:
$scope.CorrItems=[{"SFICode":"803.025.01","Desc":"Repair coupling of the discharge pump of the Bilge Water Separator"},{"SFICode":"823.125.01","Desc":"pump of the Bilge Water Separator"},]
Thanks in advance..

I rewrote part of your code. Now ng-repeat in table looks like
<tr ng-repeat="corrItem in CorrItems|filter: searchText">
<td >{{corrItem.SFICode}}</td>
<td>{{corrItem.Desc}}</td>
</tr>
and searchText filter is defined on the above form part as follows:
<fieldset class="form-group">
<legend>Search</legend>
<input type="radio" name="Search" id="rdoSfiCode" value="SFICode" ng-model="radioValue">
<label for="rdoSfiCode">SfiCode</label>
<input type="radio" name="Search" id="rdoTitleDisc" value="Desc" ng-model="radioValue">
<label for="rdoTitleDisc">Title/Discription</label><br>
<input ng-model="searchText[radioValue]" ng-init="searchText = {}; radioValue='SFICode'" type="text" />
</fieldset>
you could probably clean your code more, anyway sticking with your original code I created this fiddle you can try.

This should help you:
http://plnkr.co/edit/l6owYp2sKkcllbFrof1Z?p=preview
<input type="radio" name="filter" value="SFICode" ng-model="filter" ng-change="clearFilter()">
<label for="rdoSfiCode">SfiCode</label>
<input type="radio" name="filter" value="Desc" ng-model="filter" ng-change="clearFilter()">
<label for="rdoTitleDisc">Tile/Discription</label>
<input type="text" ng-model="search[filter]" />
<table>
<tr ng-repeat="(key,value) in data | filter:search">
<td>{{value.SFICode}}</td>
<td>{{value.Desc}}</td>
</tr>
</table>
And your angular code:
var app = angular.module("myapp", []);
app.controller("main", function($scope) {
$scope.data = [{
SFICode: "803.025.01",
Desc: "Repair coupling of the discharge pump of the Bilge Water Separator"
}, {
SFICode: "823.125.01",
Desc: "pump of the Bilge Water Separator"
}];
$scope.clearFilter = function() {
$scope.search = {};
}
});
Some general advice, be consistent with capital letters and collect your style attributes in a css file!
Arrays in Angular shouldn't start with a capital letter (CorrItems -> corrItems), neither should object properties (SFICode -> sfiCode) etc.

EasyAutocomplete jquery plugin for live search ,dropdown suggestion box overlapps input fields around it

The problem comes when I search in location, then its dropdown suggestions overlaps below input fields.
home.php
<form>
<label for="contact-name">Contact Name:</label>
<input type="text"/>
<label for="contact-no">Contact No:</label>
<input type="number"/>
<label for="place">Location:</label>
<!--problem area from here-->.
<input type="text" id="locate"name="location" />
<script src="live_search.js"></script>
<label for="size">Size:</label>
<input type="text" />
<label for="price">Price:</label>
<input type="number" />
<label for="rent">Rent/Monthly:</label>
<input type="number"/>
<button type="submit" name="submit-data">Submit</button>
</form>
This script triggers the autocomplete function for searchbox and displays the suggestions from jason file and when it does, it makes a dropdown below input box of location where the problem occurs.
live_search.js
var options = {
url: "location.json",//goto location.json
getValue: "location",//get the value of the object with name=location
list: {
match: {
enabled: true
}
}
};
$("#locate").easyAutocomplete(options);
location.json
[
{"location":"wapda town"},
{"location":"gulberg"},
{"location":"valencia"},
{"location":"gulshan e iqbal"},
{"location":"iqbal avenue"},
{"location":"architect society"},
{"location":"garden town"},
{"location":"defence"},
{"location":"Faisal Garden"},
{"location":"Faisal Town"},
{"location":"Faisalabad"}
]

AngularJS, multiple generated forms on page. How to get contents of forms

I have a web page that generates forms to updates things over REST API on remote server. The forms are generated with PHP.
The forms are as follows:
Textfield: name
textfield: description
select: type (ng-model="selection")
option a
option b
option c
textfields f1, f2, f3: some of these are hidden depending on the selection.
button that fires (update()) AngularJS when pressed.
There are multiple of such forms on the page.
How do I get the contents of the fields to pass to update() using AngularJS? I thought that I could use Javascript getElementById and do some magic to that stuff but I bet there would be a more beautiful way to do it.

In AngularJS you can bind data to your form using the ng-model property.
Check out the example from the documentation:
<form novalidate class="simple-form">
Name: <input type="text" ng-model="user.name" /><br />
E-mail: <input type="email" ng-model="user.email" /><br />
Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<br />
<input type="button" ng-click="reset()" value="Reset" />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
http://plnkr.co/edit/qr1HdCqgr7jvf5aR0Gb2?p=preview
It is a good practice to have models being part of one object and only define properties on this object (in the form above, the model for your form data is the user object and each field is used to specify a property of this object, user.email for example).
Then, in your controller, you can access your form values through the corresponding scope variable ($scope.user in our example).

You can set ng-model to each of the form fields. Inside update method you can access them using $scope object.
E.g
<input type="text" ng-model="form1.name">
<input type="text" ng-model="form1.description">
...
...
<input type="text" ng-model="form2.name">
<input type="text" ng-model="form2.description">
Js
In the update method you can access it using $scope.form1.name, $scope.form1.description

You can create tabs where every tab will be one form (editing one item), clicking on one tab it will open you the current element and you can edit it. This way you do not need to know how many elements there will be.
<div ng-app>
<article ng-controller="AplicationCtrl">
<ul>
<li ng-repeat="item in items">
Tabs {{$index}}
</li>
</ul>
<br/>
<div>
<input ng-model="selectedItem.name"/>
<input ng-model="selectedItem.description"/>
</div>
Update values
</article>
</div>
function AplicationCtrl($scope) {
$scope.items = [
{
name: 'this is name1',
description: 'desc 1'
},
{
name: 'this is name 2',
description: 'desc 2'
},
{
name: 'this is name 3',
description: 'desc 4'
}
]
$scope.changeSelected = function (index) {
$scope.selectedItem = $scope.items[index];
}
$scope.changeSelected(0);
$scope.update = function () {
console.log($scope.items);
}
}
you can look it at here:
http://jsfiddle.net/9c567te7/

Save HTML form schema to JSON

Is there any way to save HTML Form schema to JSON?
E.g. when I have something like this
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
How i can achieve somehting like this:
[
{
field: 'input',
type: 'text',
name: 'firstname'
},
{
field: 'input',
type: 'text',
name: 'lastname'
},
]
I dont mean that it has to be exact output as above, but how I can achieve something similar?

The idea is to do something like this. You can iterate through form elements collection of elements, and use every element to extract necessary information.
In code below I used Array.prototype.map method, but maybe it would be more convenient to go with simple for loop. It would give you more room for customization.
function serializeSchema(form) {
return [].map.call(form.elements, function(el) {
return {
type: el.type,
name: el.name,
value: el.value
};
});
};
var form = document.querySelector('form'),
schema = serializeSchema(form);
alert(JSON.stringify(schema, null, 4));
<form>
<input type="text" name="firstname" value="Test">
<input type="text" name="lastname">
<select name="age" id="">
<option value="123" selected>123</option>
</select>
<input type="checkbox" name ="agree" value="1" checked> agree
</form>
Also one more note. What you are trying to achieve is very similar to what jQuery's $.fn.serializeArray method does (it doesn't collect type). However it's pretty simple to extend serializeArray to make it also return type of the elements.