I have a form
<form>
<div class="form-group">
<input class="form-control" ([ngModel])="login" placeholder="Login" required>
</div>
<div class="form-group">
<input type="password" class="form-control" ([ngModel])="password" placeholder="Password">
</div>
<div class="form-group">
<button (click)="logUpUser()" class="btn btn-primary">Sign Up</button>
</div>
</form>
and I want to send the value from HTML form to the typescript method
export class LogUpFormComponent implements OnInit {
login: string;
password: string;
constructor() { }
logUpUser() {
console.log(this.login);
}
}
but in the method logUpUser() I get the value of undefined. What am i doing wrong?
The correct HTML-Code has to look like this:
<form>
<div class="form-group">
<input class="form-control" [(ngModel)]="login" placeholder="Login" required>
</div>
<div class="form-group">
<input type="password" class="form-control" [(ngModel)]="password" placeholder="Password">
</div>
<div class="form-group">
<button (click)="logUpUser()" class="btn btn-primary">Sign Up</button>
</div>
</form>
And in your ts-File try this:
login: string = '';
password: string = '';
Related
https://pasteboard.co/IVAyRyij.png
I'm trying to send form data to PHP but I just get undefined as form data. Please help.
My HTML:
<div class="account-wall">
<img class="profile-img" src="img/male.png" alt="">
<form class="form-signin" role="form" ng-submit="login('Restraunt')">
<input type="text" class="form-control" ng-model="user" placeholder="User Name" required >
<input type="password" class="form-control" ng-model="pass" placeholder="Password" required>
<button type="submit" class="btn btn-lg btn-primary btn-block">Sign in</button>
<label class="checkbox pull-left">
<input type="checkbox" value="remember-me">Remember me
</label>
Need help? <span class="clearfix"></span>
</form>
</div>
My ui-view:
.state("app.admin", {
url: "/admin",
views: {
sub: {
templateUrl: "templates/admin.html"
}
}
})
My Controllers:
$scope.login=function (type2) {
$http2.post($rootScope.url+"login.php",{
type:type2,
user:$scope.user,
pass:$scope.pass
}).then(function (resp)
so I have a pre-populated Bootstrap form with a Edit# button, I now want to edit the content. It gets data from the JSON url created from the Firebase database. It has User model.The functions are in the userprofile.component.ts . Please advise.
User Html page
<form class="needs-validation" novalidate >
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstname" placeholder="first name"
value={{useritem.firstname}} required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastname" placeholder="last name"
value={{useritem.lastname}} required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
</div>
<div class="btn-toolbar float-right">
<button class="btn btn-info mr-1" (click)="updateUser();">Update</button>
<button class="btn btn-dark " type="reset">Clear</button>
</div>
</form>
Firebase.service.ts
constructor(private httpClient: HttpClient) {}
public getuserprofile() : Observable<User[]>
{
return this.httpClient.get<User[]>(this.connectUrl);
}
updateuserprofile( user: User): Observable<User>
{
return this.httpClient.put<User>(this.connectUrl, user);
}
userprofile.component.ts
export class UserprofileComponent implements OnInit {
useritem: any = [];
constructor(private db: FirebaseService) { }
ngOnInit() {
this.getUser();
}
getUser() {
this.db.getuserprofile().subscribe(result =>
{
this.useritem = result;
console.log(result);
});
} }
Try to use for. ex Reactive Forms :
<form [formGroup]="form">
<div class="row">
<div class="col-md-6 mb-3">
<input formControlName="userName" placeholder="first name" >
<input formControlName="userLastName" placeholder="last name" >
</div></div>
<div class="btn-toolbar float-right">
<button class="btn btn-info mr-1" (click)="updateUser();">Update</button>
<button class="btn btn-dark " type="reset" (click)="reset()">Clear</button>
</div>
</form>
ts:
updateUser(){
this.newUser = {
userName: this.form.get('userName').value,
userLastName: this.form.get('userLastName').value
}
console.log(this.newUser) //here you can make PUT to firebase
}
reset(){
this.form.reset()
this.newUser = {}
}
https://stackblitz.com/edit/angular-1ixedr?file=src/app/app.component.ts
Hope it helps!
I have an address management app, and I'm trying to save changes on ngSubmit. However, it says that my function is not a function.
my HTML:
<div class="form">
<h4>{{title}}</h4>
<div class="form-container">
<form (ngSubmit)="addFriend()">
<div class="form-group">
<label for="id">Id</label>
<input type="text" name="id" [(ngModel)]="friend.id"
[disabled]="friend.id" class="form-control" required />
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" [(ngModel)]="friend.name"
class="form-control" required />
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" name="address" [(ngModel)]="friend.address"
class="form-control" required />
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" name="phone" [(ngModel)]="friend.phone"
class="form-control" required />
</div>
<div class="form-group">
<a class="btn btn-default" routerLink="">Cancel</a>
<button class="btn btn-primary" >Save</button>
</div>
</form>
</div>
</div>
am I doing something wrong in the html, or would the problem be elsewhere?
The addFriend function is defined in my service.ts file.
You have to define addFriend in your component ts file like
addFriend(){
//some work here
}
Your component template does not have access to your service, but only to your component class methods.
So you need to
1/ inject your service into your component
2/ define in your component a method that calls the service methods
for example in your component :
constructor(private friendsService: FriendsService) {}
....
addFriend(){
return this.friendsService.addFriend();
}
I have the following problem, I made the form:
<button class="btn btn-success">Edit form</button><div class="container" style="width:300px;">
<form method="POST" role="form" #formName = "ngForm" >
<div class="form-group">
<label form="username">Username: </label>
<input type="text" name="username" value="" class="form-control" [disabled]="true">
</div>
<div class="form-group">
<label form="password">Password: </label>
<input type="text" name="password" value="" class="form-control" [disabled] = "true">
</div>
<input type="hidden" value="" name="password_confirm">
<input type="submit" value="Submit" class="btn btn-primary">
</form>
</div>
By default, the fields are to have disabled status so that they can not be edited, now I would like the form to be available for editing after clicking the Edit form button and the hidden field as text. Unfortunately, for now, I have no idea how to go about it :(
Give this a try:
<button class="btn btn-success" (click)="onTogglenotEditMode()">Edit form</button>
<div class="container" style="width:300px;">
<form method="POST" role="form" #formName = "ngForm" >
<div class="form-group">
<label form="username">Username: </label>
<input type="text" name="username" value="" class="form-control" [disabled]="notEditMode">
</div>
<div class="form-group">
<label form="password">Password: </label>
<input type="text" name="password" value="" class="form-control" [disabled] = "notEditMode">
</div>
<div class="form-group">
<label form="password">Password: </label>
<input *ngIf="!notEditMode" type="text" value="" name="password_confirm">
</div>
<input type="submit" value="Submit" class="btn btn-primary">
</form>
</div>
And in the Component:
import { Component } from '#angular/core';
#Component({...})
export class AppComponent {
notEditMode = true;
onTogglenotEditMode() {
this.notEditMode = !this.notEditMode;
}
}
Here's a Working Sample StackBlitz for your ref.
I have the following html form in angular
<form (ngSubmit)="signin()" #signinform="ngForm">
<div class="form-group row">
<label for="signinemail" class="col-sm-2 col-form-label">Email:</label>
<div class="col-sm-10">
<input type="email"
class="form-control"
id="signinemail"
name="signinemail"
ngModel
placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="signinpassword" class="col-sm-2 col-form-label">Password:</label>
<div class="col-sm-10">
<input type="password"
class="form-control"
id="signinpassword"
name="signinpassword"
ngModel
placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input ml-0"
type="checkbox"
id="gridCheck"
name="remembercheckbox"
ngModel>
<label class="form-check-label" for="gridCheck">
Remember Me
</label>
</div>
<small class="form-text text-muted">Forget Password?</small>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Sign In</button>
<button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
</div>
</form>
and the following typescript for the form:
import {NgForm} from "#angular/forms";
#ViewChild('signinform') signinform: NgForm;
signin() {
let payload = {
email: this.signinform.form.value.signinemail,
password: this.signinform.form.value.signinpassword,
localstorage: this.signinform.form.value.remembercheckbox
};
this.userservice.gettoken(payload);
this.signedin = true;
}
I have compared this to other forms I have built and yet there is no difference. What could be causing this?
the form element is on the dom when I call. The submit button is within the form. The #ViewChild element syntax is correct and properly imported. I truly don't understand and I am ready to punch a baby.
The code looks fine...You could just try not using view child, and instead do:
<form (ngSubmit)="signin(signinform)" #signinform="ngForm">
signin(form: NgForm) {
console.log(form);
}
I'd definitely try that console though, to make sure the form is being submitted properly.