我在设计登录页面时感到震惊，我正在使用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");
}
}
像这样更改您的<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");
}
}
在继续之前，强烈建议您阅读使用ngSubmit提交表单，以更好地了解Angular表单概念。
并确保在app.module.ts文件中包含FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [ ],
imports: [ FormsModule ],
providers: [ ]
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句