multiple forms same page ionic2 - angularjs

I am new in Ionic2 and can't solve one thing myself, I have small app width page: user-list and getting data from firebase width angularfire2.
First table name in Firebase is: imported
Second Table name in Firebase is: userProfile
in the imported table is user details (name, email, bdate etc..) and I want to get data from this table, then push to the userProfile table one by one.
so my user-list.ts is this:
export class UsersListPage {
public signupForm: FormGroup;
user:any;
usersList: FirebaseListObservable<any[]>;
usersTable: FirebaseListObservable<any[]>;
constructor(
public navCtrl: NavController,
public formBuilder: FormBuilder,
public navParams: NavParams,
public authProvider: AuthProvider,
public db: AngularFireDatabase
) {
this.usersList = db.list('/imported');
this.usersTable = db.list('usersProfile');
this.user = authProvider.userUid();
this.signupForm = formBuilder.group({
address: [''],
password: [''],
bday: [''],
email: [''],
name: [''],
number: [''],
signedup: [''],
telephone: [''],
zip: [''],
uid: [''],
});
}
createUser(){
this.authProvider.signupUser(this.signupForm.value.email, this.signupForm.value.password).then(() => {
this.usersTable.push({
email: this.signupForm.value.email,
password: this.signupForm.value.password,
address: this.signupForm.value.address,
bday: this.signupForm.value.bday,
name: this.signupForm.value.name,
number: this.signupForm.value.number,
signedup: this.signupForm.value.signedup,
telephone: this.signupForm.value.telephone,
zip: this.signupForm.value.zip,
uid: this.user
});
});
}
}
and my html is:
<ion-content padding>
<form *ngFor="let user of usersList | async" [formGroup]="signupForm" (submit)="createUser()">
<ion-input formControlName="email" value="{{ user.email }}" type="text"></ion-input>
<ion-input formControlName="password" value="{{ user.telephone }}" type="text"></ion-input>
<ion-input formControlName="address" value="{{ user.address }}" type="text"></ion-input>
<ion-input formControlName="bday" value="{{ user.bday }}" type="text"></ion-input>
<ion-input formControlName="name" value="{{ user.name }}" type="text"></ion-input>
<ion-input formControlName="number" value="{{ user.number }}" type="text"></ion-input>
<ion-input formControlName="signedup" value="{{ user.signedup }}" type="text"></ion-input>
<ion-input formControlName="telephone" value="{{ user.telephone }}" type="text"></ion-input>
<ion-input formControlName="zip" value="{{ user.zip }}" type="hidden"></ion-input>
<button ion-button type="submit" color="secondary" >
User Registration
</button>
</form>
</ion-content>
it works but one problem is here, when I click the button only adds the last record from imported table, so I can not add one by one user per click

Related

How to get the items of an array returned from a database in ionic 3

I want to return every element from this array and set it to a string variable inside ionic 3 ts file : 0: {Name: "s", DateOfBirth: "s", Adress: "s", Telephone: "s"}
0: {Name: "s", DateOfBirth: "s", Adress: "s", Telephone: "s"}
proto: Objectlength: 1
proto: Array(0)
My ionic 3 code is :
public items : any =[];
PatientName:string;
public Name:string;
public DateOfBirth:string;
public Adress:string;
public Telephone:string;
public name:string;
public dateOfBirth:string;
public adress:string;
public telephone:string;
constructor(public http:Http,public navCtrl: NavController, public
navParams: NavParams) {
this.PatientName=navParams.get('Username');
}
load(){
this.http.get('http://localhost:10080/testdb/PatientProfile.php?
Patientname='+this.PatientName)
.map(res => res.json())
.subscribe(data =>
{
this.items = data;
this.DateOfBirth=this.items.DateOfBirth;
this.Adress=this.items.Adress;
this.Telephone=this.items.Telephone;
console.log(data);
});
}
ionViewDidLoad() {
this.PatientName=this.navParams.get('Username');
console.log(this.PatientName);
console.log('ionViewDidLoad PatientInfoPage');
this.load();
}
AND this is the .html file"
<ion-item>
<ion-label floating color="primary">Name</ion-label>
<ion-input
type="text"
[(ngModel)]="Name" value="{{name}}"></ion-input>
</ion-item>
<ion-item>
<ion-label floating color="primary">Date Of Birth</ion-label>
<ion-input
type="text"
[(ngModel)]="DateOfBirth" value="{{dateOfBirth}}"></ion-input>
</ion-item>
<ion-item>
<ion-label floating color="primary">Adress</ion-label>
<ion-input
type="text"
[(ngModel)]="Adress" value="{{adress}}"></ion-input>
</ion-item>
<ion-item>
<ion-label floating color="primary">Telephone Number</ion-label>
<ion-input
type="text"
[(ngModel)]="Telephone" value="{{telephone}}"></ion-input>
</ion-item>

Filtering out child items in a select form item

I am using ng-if to try to filter out the cities based on the selected state. For some reason, the city select box disappears when a state is selected.
var app = angular.module('App', ['angular.filter']);
app.controller("Ctrl", function($scope) {
$scope.message = "Choose a Popular City";
$scope.data = [
{ city: 'New York', state: 'New York', population: 8175133 },
{ city: 'Los Angeles', state: 'California', population: 3792621 },
{ city: 'Chicago', state: 'Illinois', population: 2695598 },
{ city: 'Huston', state: 'Texas', population: 2099451 },
{ city: 'Philadelphia', state: 'Pennsylvania', population: 1526006 },
{ city: 'Phoenix', state: 'Arizona', population: 1445632 },
{ city: 'San Antonio', state: 'California', population: 1327407 },
{ city: 'San Diego', state: 'California', population: 1307402 },
{ city: 'Dallas', state: 'Texas', population: 1197816 },
{ city: 'San Jose', state: 'California', population: 945942 }
];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body ng-app="App">
<div ng-controller="Ctrl" class="container">
<h1>{{message}}</h1>
<form>
<div class="form-group">
<label>Country</label>
<select name="state" class="form-control"
ng-model="state"
ng-init="state = state || options[0]"
ng-options="option.state for option in data|unique:'state'|orderBy:'state'">
</select>
</div>
<div class="form-group">
<label>City</label>
<select name="city" class="form-control"
ng-model="city"
ng-options="option.city for option in data"
ng-if="option.state == state"
ng-disabled="!country">
</select>
</div>
<br />
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
Data via: Largest cities in the United States by population by decade, Wikipedia.
You have issue with your city dropdown, change the code to
<select name="city" class="form-control"
ng-model="city"
ng-options="option.city for option in data |filter:state.state"
ng-disabled="!state">
</select>
there is nothing like country, your model is state
ng-disabled="!country"
ng-if is used to conditional render, what you want to achieve with this is not clear
ng-if="option.state == state"
Try like this to see if it works, dont have time to test it.
<select name="city" class="form-control" ng-model="city" ng-if="option.state == state" ng-disabled="!country">
<option ng-repeat="option.city for option in data"
value="{{option.city}}" ng-if="option.state == state">
{{option.city}}
</option>
</select>
Hope it helps :)
Try something like this.
<select name="city" class="form-control"
ng-model="city"
ng-options="option.city for option in data | filter:{ city : state }"
ng-disabled="!country">
</select>

Angular 2 nested form group contains null values

I'm working with a nested form group structure with Angular 2 beta "FormBuilder" and for the life of me I can't get values into the nested form group. It's weird because binding works just fine. I can send a "user" object to the form and it fills in all the values for the user and their address. But when sending the form value out (say, to an HttpPost), it looks just like the object below...
FWIW I'm following Mosh Hamedani's excellent Angluar 2 course on Udemy and have checked and double checked that the relevant code matches his here: https://github.com/mosh-hamedani/angular2-course
Perhaps what I need is to be told where else to look in my code?
Here's my form group as shown by placing {{ form.value | json }} at the end of my form:
{
"name": "Leanne Graham",
"email": "Sincere#april.biz",
"phone": "1-770-736-8031 x56442",
"address": {
"street": null,
"suite": null,
"city": null,
"zipcode": null
}
}
this is the constructor in my component:
constructor(
fb: FormBuilder,
private router: Router,
private usersService: UsersService,
private params: RouteParams
){
this.form = fb.group({
name: ['', Validators.required],
email: ['', EmailValidators.mustBeEmail], // I hadn't considered the obvious: if it doesn't exist it also doesn't qualify as email.
phone: [],
address: fb.group({
street: [],
suite: [],
city: [],
zipcode: []
})
});
}
This is the form in my template (truncated for brevity):
<div class="col-md-6 well">
<!--the "fieldset" element is needed for this kind of grouped layout.-->
<form [ngFormModel]="form" (ngSubmit)="save()">
<fieldset>
<legend>User</legend>
<div class="form-group">
<label>Name</label>
<input type="text" [(ngModel)]="user.name" ngControl="name" #name="ngForm" class="form-control">
<div class="alert alert-danger" *ngIf="name.errors && name.touched">
The user name is required.
</div>
</div>
*** Email and Phone similar ***
</fieldset>
<fieldset ngControlGroup="address">
<legend>Address</legend>
<div class="form-group">
<label>Street</label>
<input type="text" [(ngModel)]="user.address.street" ng-control="street" class="form-control">
</div>
*** suite, city, and zip similar ***
</fieldset>
{{ form.value | json }}
<button [disabled]="!form.valid" class="btn btn-primary" type="submit">Save</button>
</form>
</div>
ng-control="street"
should be
ngControl="street"
like you did with name

Not working ng-options in SELECT

I am trying to populate States in Select with ng-options. As i am new to angular, result doesn't come as expected.
Controller
$scope.statesList = function () {
StatesList.query(function (states) {
$scope.states = states;
});
};
Html
<td data-ng-init="statesList()">
<select ng-model="practiceAdd.state" name="state{{$index+1}}" ng-class="{'has-error': editForm.{{$index+1}}.$invalid}"
ng-options="state in states" required>
</select>
</td>
Array
$$hashKey: "05S"
_id: "53107e099d985dc404000015"
city: "mumbai"
country: "india"
state: "AR"
street: "1"
zipcode: 42101
Try like This..
In HTML
<select name="countries" id="countries" ng-model="countryCode" ng-options="country.code as country.name for country in countries"></select>
In angular JS Code
$scope.countries = [
{
name: 'Poland',
code: 'PL'
},
{
name: 'United Kingdom',
code: 'UK'
},
{
name: 'United States of America',
code: 'USA'
}
];
$scope.countryCode = 'UK';
Working Exaple
In your Example ;
<td>
<select ng-model="state.Id" name="state{{$index+1}}" ng-options="state.Id as state.name for state in states" required>
</select>
</td>
State id and state name should be defined by you.

Angularjs ng-repeat with $resource

I am newbie with angularjs
I want get data with $resource whitch repeat on html
but there is the error show
"Expected ngRepeat in form of 'item in collection' but got 'user'"
code
<dd ng-repeat= user in User.users>
<input type="radio" value= "{{user.user.userId}}" />
{{user.user.userUsername}}
</dd>
$scope.User= {'user': userService.query()};
please help
return data
User: {
user:
[ {
userId: 1
userName: User1
userUsername: user1
userPassword: 123456
userSex: male
userBirthday: 1999-01-01
userStatus: 1
roleId: 1
roleModel: { }
} ,
{
userId: 2
userName: User2
userUsername: user2
userPassword: 123456
userSex: female
userBirthday: 1888-01-01
userStatus: 1
roleId: 1
roleModel: { }
} ]
}
Try as below:
<div ng-repeat="user in User.user">
<input type="radio" value= "{{user.userId}}" />
{{user.userUsername}}
</div>
Try this
if your userService.query() return collection of objects.
<dd ng-repeat= "user in User.users">
<input type="radio" value= "{{user.userId}}" />
{{user.userUsername}}
</dd>
$scope.User= {'user': userService.query()};

Resources