Angular表单提交页面刷新、控制台无输出、CSS不生效求助

问题总结 #

提交表单后页面自动刷新，控制台无输出；CSS样式未生效，文本未按要求居中；已导入ReactiveFormsModule但问题仍存在。预期效果：提交后页面不刷新、控制台打印form submitted及表单数据、所有文本居中显示。

相关代码 #

组件.ts文件 #

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

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

export class FormComponentComponent{  

  submit(login: any){  
    console.log("form submitted", login);  
  }  
}  

组件.css文件 #

div{
  text-align: center;
}

label{
  text-align: left;
}

app.module.ts文件 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormComponentComponent } from './form-component/form-component.component';

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

@NgModule({
  declarations: [
    AppComponent,
    FormComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML文件（根据场景推测的错误写法） #

<form>
  <div>
    <label>用户名:</label>
    <input type="text" name="username">
  </div>
  <div>
    <label>密码:</label>
    <input type="password" name="password">
  </div>
  <button type="submit" (click)="submit()">提交</button>
</form>

修复方案 #

1. 解决页面刷新与控制台无输出问题 #

原生表单默认会触发页面跳转，必须使用Angular的ngSubmit指令阻止默认行为，并通过模板引用变量传递表单数据：

• 给表单添加(ngSubmit)绑定提交方法，同时声明模板变量#loginForm="ngForm"
• 移除按钮的(click)绑定，保留type="submit"
• 表单控件添加ngModel指令启用双向绑定，确保表单数据能被捕获

修复后的HTML：

<form (ngSubmit)="submit(loginForm)" #loginForm="ngForm">
  <div>
    <label>用户名:</label>
    <input type="text" name="username" ngModel>
  </div>
  <div>
    <label>密码:</label>
    <input type="password" name="password" ngModel>
  </div>
  <button type="submit">提交</button>
</form>

2. 解决CSS样式未生效问题 #

• 先确认styleUrls路径正确，确保CSS文件与组件.ts文件在同一目录
• 若样式仍不生效，通过:host选择器提升优先级，同时给label设置display: inline-block让text-align生效：

:host div {
  text-align: center;
}

:host label {
  text-align: left;
  display: inline-block;
  min-width: 80px;
}

3. 验证效果 #

修改后提交表单，页面不会刷新，控制台会打印form submitted及包含表单数据的NgForm实例，同时所有文本会居中显示。

内容的提问来源于stack exchange，提问作者M. H.