Question

我在设计登录页面时很震惊，我正在使用angular4 formmodule，我想在点击登录按钮时显示一些消息，但我无法做同样的事情，请帮助我。提前谢谢。

这是我的HTML代码，

<div class="container">
    <h1>Hi Champ</h1>
    <form #heroForm="ngForm">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name"
       required>
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input type="Password" class="form-control" id="password">
      </div>

      <div class="form-group">
      <label for="power">Role</label>
      <br>
      <select class="form-control" id="power" required>
      <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
      </select>
</div>

      <button type="button" class="btn btn-default" (click)="signin()">SignIn</button>
    </form>
</div>

并且组件中的代码完全是空的，请帮帮我，

import { Component } from '@angular/core';

import { Hero } from '../hero';

@Component({
  selector: 'app-hero-form',
  templateUrl: './hero-form.component.html',
  styleUrls: ['./hero-form.component.css']
})
export class HeroFormComponent{


   powers = ['Admin', 'Looser'];

   signin(){
   console.log("Hello");
   }

}

Answer 1

更改您的<form> <button> 标记和登录方法，如下所示：

<form (ngSubmit)="signin(heroForm)" #heroForm="ngForm">  
<button type="submit" class="btn btn-default">SignIn</button>

import { NgForm } from '@angular/forms'; 
export class HeroFormComponent{
   signin(form: NgForm){
   console.log("Hello");
   }  
}

在继续之前，我强烈建议您阅读Submit the form with ngSubmit，以便更好地理解Angular表单概念。

并确保您已在 app.module.ts 文件中包含 FormsModule

import { FormsModule } from '@angular/forms';

@NgModule({ 
  declarations: [ ],
  imports: [ FormsModule ],
  providers: [ ]
})

当用户点击按钮时，如何在angular4中单击时显示消息

1 个答案: