angular6 相关问题

请帮助我的角度表单（提交）不起作用。我正在制作一个登录应用程序登录.component.html 请帮助我的角度表单（提交）不起作用。我正在制作一个登录应用程序登录.component.html <form (submit)="loginUser($event)"> <input type="text" placeholder="Enter Username"> <input type="password" placeholder="Enter Password"> <input type="submit" value="Submit"> </form> 登录.组件.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { constructor() { } ngOnInit() { } loginUser(event) { event.preventDefault() Console.log(event) } } 我建议您对 ReactiveForms 等表单使用角度组件： import { FormGroup, FormControl, Validators } from '@angular/forms'; public loginForm: FormGroup; constructor() { this.loginForm = new FormGroup({ 'username': new FormControl('', [ Validators.required ]), 'password': new FormControl('', [ Validators.required ]) }); } public sendLogin(): void { console.log(loginForm.value); } <form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && sendLogin()"> <input formControlName="username" type="text" placeholder="Enter Username"> <input formControlName="password" type="password" placeholder="Enter Password"> <input type="submit" value="Submit"> </form> 请记住将 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 导入到您的 app.module.ts！您需要做两件事才能工作。 1. 如果输入中没有 name 属性，Angular 表单将无法工作。您可以按如下方式更改代码。 <input type="text" name="username" placeholder="Enter Username"> 然而，这并不特定于 Angular，而是一般的 HTML。名称属性请参阅 MDN 描述您还需要确保FormsModule已导入到您的角度模块中（最有可能是app.module.ts）。然后在表单标签中 Angular 包含 2 种管理表单的方法 - FormsModule 和 ReactiveFormsModule。 FormsModule 是两者中更容易的一个，但不能提供很多控制。 ReactiveFormsModule 有点复杂，但提供了很多控制。对于你的情况FormsModule看起来已经足够好了。此外，创建按钮的更语义化的方式是使用 <button type="submit>" 标签而不是 <input type="submit">。你能试试这个吗？请使用 ngSubmit 而不是使用 (submit)。 <form (ngSubmit)="loginUser($event)"> 您可能需要在此处添加分号来美化您的代码 event.preventDefault(); Console.log(event); 这里有一些参考： https://angular.io/guide/forms Angular 在我们的应用程序中主要提供两种不同的构建表单的方式。他们是： 1. 模板驱动方法，允许使用更少的 cpde 构建表单 2. 使用低级 API 的响应式方法，使我们的表单无需 DOM 即可测试。我们还可以使用 FormBuilder，它是一个高级 API，我们可以通过 Angular 访问。如果你想使用模板驱动的方法。您需要首先在 app.module.ts 文件中导入 FormsModule。在文件中添加以下语句：从'@angular/forms'导入{FormsModule}；并在您的 @NgModule 指令中添加 FormsModule； @NgModule({ imports:[ //other imports FormsModule ], }) 然后在您的登录模板中，您需要进行更改，代码应如下所示： <form (ngSubmit)="loginUser($event)"> <input type="text" placeholder="Enter Username" id="username"> <input type="password" placeholder="Enter Password" id="password"> <button type="submit">Submit</button> <form> // 语义化并使用按钮而不是输入 type = "submit" 是件好事并在login.component.ts中删除event.preventDefault()。而且，console.log 的语法带有小写“c”。所以，代码看起来像这样： import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { constructor() { } ngOnInit() { } loginUser(event) { console.log(event); } } //您不需要添加 event.preventDefault()，因为您不会被重定向到任何新 URL。现在您可以在控制台中看到您的事件正在被记录。如果您想尝试反应式方法（也称为模型驱动）。您将需要导入 ReactiveFormsModule。因此，将以下代码片段添加到 app.mopdule.ts import { ReactiveFormsModule } from '@angular/forms' @NgModule({ imports:[ //other imports ReactiveFormsModule ], }) 请记住，响应式方法意味着您需要事先对表单进行建模并在模板中实现。所以，在你的login.component.ts中。您将需要导入 FormControl 来设置表单的初始值。您的 login.component.ts 文件将如下所示： import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { loginForm = new FormGroup({ username: new FormControl(''), password: new FormControl('') }); constructor() { } ngOnInit() { } loginUser() { console.log(this.loginForm.value); } } 现在，将您的 login.component.html 文件更改为以下内容： <form [formGroup]="loginForm" (ngSubmit)="loginUser()"> <input type="text" placeholder="Enter Username" formControlName="username"> <input type="password" placeholder="Enter Password" formControlName="password"> <button type="submit">Submit</button> </form> 现在您可以看到控制台来查看正在存储的值。

angular angular6 angular-forms

回答 4 投票 0

如何在 Angular 6 的 index.html 中使用环境变量

我正在使用 Angular6，在我的项目中我使用 Facebook Account Toolkit 进行移动验证。我需要使用以下代码在 index.html 文件中初始化帐户工具包。 AccountKit.in...

angular6 account-kit

回答 10 投票 0

如何使用 TypeScript 将多个参数传递给 Angular 中的 @Directives (@Components)？

自从我将 @Directive 创建为 SelectableDirective 以来，我对如何将多个值传递给自定义指令有点困惑。我已经搜索了很多，但没有得到正确的解决方案

angular typescript angular6

回答 5 投票 0

Angular 6 中的 Google 身份验证

我在 Angular 6 中创建了一个项目，它使用 Angular-6-social-login 展示谷歌身份验证。以下是安装命令： npm install --save Angular-6-social-login 在此之后，我...