[英]Local Storage/Session Storage
My Html file is as follows:我的Html文件如下:
<h2>Welcome User!!!</h2>
<form class="container" action="/product">
<div>
<label for="mail"><b>Email-ID: [(ngModel)]</b></label>
<input type="text" placeholder="Enter mail ID" [(ngModel)]="mail" name="mail" required>
<label for="psw"><b>Phone Number</b></label>
<input type="text" placeholder="Enter Phone Number" [(ngModel)]="mail" name="phoneNumber" required>
<button (click)="myFunc()">NEXT</button>
</div>
</form>
My Typescript file is as follows:我的打字稿文件如下:
import { Component, NgModule, OnInit } from '@angular/core';
import { Router, RouterModule, Routes } from '@angular/router';
import { MyProductPageComponent } from '../my-product-page/my-product-page.component';
@Component({
selector: 'app-my-home-page',
templateUrl: './my-home-page.component.html',
styleUrls: ['./my-home-page.component.css']
})
export class MyHomePageComponent implements OnInit {
phoneNumber = "";
mailID = "";
constructor(private router: Router) {
}
ngOnInit(): void {
}
myFunc() {
localStorage.setItem("phoneNumber", this.phoneNumber);
localStorage.setItem("mail", this.mailID);
this.router.navigate(['/products']);
}
}
const routes: Routes = [
{ path: 'MyProductPageComponent', component: MyProductPageComponent },
]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
I want to fetch Phone number and Mail ID entered in form and save that in Local Storage.我想获取在表单中输入的电话号码和邮件 ID 并将其保存在本地存储中。 And redirect to the next page.
并重定向到下一页。 Please help.
请帮忙。 Am getting this error: Declaration expected.
收到此错误:预期声明。
you need to use ngmodel to bind the value with input control and same you can access in your component.您需要使用 ngmodel 将值与输入控件绑定,并且您可以在组件中访问它。
<h2>Welcome User!!!</h2> <form class="container" action="/product"> <div> <label for="mail"><b>Email-ID: </b></label> <input type="text" [(ngModel)]="mailID" placeholder="Enter mail ID" name="mail" required> <label for="psw"><b>Phone Number</b></label> <input type="text" placeholder="Enter Phone Number" name="phoneNumber" [(ngModel)]="phoneNumber" required> <button (click)="myFunc()">NEXT</button> </div> </form>
Add variables to phone/mail in your .ts components将变量添加到.ts组件中的电话/邮件
Use this
to variables in myFunc()
to get the value of the variables this
用于myFunc()
中的变量以获取变量的值
Use ngModel
to bind the variables with the input of the user (set ngModel
on the input not label).使用
ngModel
将变量与用户的输入绑定(在输入而非标签上设置ngModel
)。
Use import { NgModule } from '@angular/core';
使用
import { NgModule } from '@angular/core';
in the app.module
and NOT in your component在
app.module
而不是在您的组件中
<h2>Welcome User!!!</h2>
<form class="container" action="/product">
<div>
<label for="mail"><b>Email-ID:</b></label>
<input type="text" placeholder="Enter mail ID" [(ngModel)]="mail" name="mail" required>
<label for="psw"><b>Phone Number</b></label>
<input type="text" placeholder="Enter Phone Number" [(ngModel)]="phoneNumber" name="phoneNumber" required>
<button (click)="myFunc()">NEXT</button>
</div>
</form>
phoneNumber = "";
mailID = "";
myFunc() {
localStorage.setItem("phoneNumber", this.phoneNumber);
localStorage.setItem("mail", this.mailID);
}
const routes: Routes = [
{ path: 'MyProductPageComponent', component: MyProductPageComponent },
]
The path variable should not have a component and you are using router.navigate('/products')
const routes: Routes = [
{ path: 'products', component: MyProductPageComponent },
]
These variables which are used in the ts should bind with the ngModel used in the template
phoneNumber = "";
mailID = "";
<h2>Welcome User!!!</h2>
<form class="container" action="/product">
<div>
<label for="mail"><b>Email-ID: </b></label>
<input type="text" placeholder="Enter mail ID" [(ngModel)]="mailID" name="mail" required>
<label for="psw"><b>Phone Number</b></label>
<input type="text" placeholder="Enter Phone Number" [(ngModel)]="phoneNumber" name="phoneNumber" required>
<button (click)="myFunc()">NEXT</button>
</div>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.