Angular 15表单仅提交有效内容及样式修改问题

1. 彻底解决ngModel与formControl混用的弃用警告 #

直接改用Angular推荐的响应式表单，完全移除ngModel，避免混用。

组件代码（.ts） #

先导入响应式表单相关模块，在组件类里构建表单并添加验证规则：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-your-form',
  templateUrl: './your-form.component.html',
  styleUrls: ['./your-form.component.scss']
})
export class YourFormComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，给字段加验证规则
    this.userForm = this.fb.group({
      name: ['', Validators.required], // 必填
      email: ['', [Validators.required, Validators.email]], // 必填+邮箱格式
      // 其他字段同理添加Validators.required
    });
  }

  onFormSubmit() {
    // 标记所有字段为已触摸，触发视觉验证提示
    this.userForm.markAllAsTouched();
    
    // 直接判断表单有效性
    if (this.userForm.invalid) {
      return; // 无效就终止提交
    }

    // 表单有效，执行提交逻辑
    console.log('表单数据:', this.userForm.value);
    // 这里写你的API请求等业务代码
  }
}

模板代码（.html） #

绑定响应式表单，用formControlName替代ngModel，配合Angular Material显示错误提示：

<form [formGroup]="userForm" (ngSubmit)="onFormSubmit()">
  <!-- 姓名输入框 -->
  <mat-form-field appearance="fill">
    <mat-label>姓名</mat-label>
    <input matInput formControlName="name">
    <mat-error *ngIf="userForm.get('name')?.invalid && (userForm.get('name')?.touched || userForm.submitted)">
      姓名不能为空
    </mat-error>
  </mat-form-field>

  <!-- 邮箱输入框 -->
  <mat-form-field appearance="fill">
    <mat-label>邮箱</mat-label>
    <input matInput formControlName="email">
    <mat-error *ngIf="userForm.get('email')?.hasError('required') && (userForm.get('email')?.touched || userForm.submitted)">
      邮箱不能为空
    </mat-error>
    <mat-error *ngIf="userForm.get('email')?.hasError('email') && (userForm.get('email')?.touched || userForm.submitted)">
      请输入有效的邮箱格式
    </mat-error>
  </mat-form-field>

  <!-- 提交按钮 -->
  <button mat-raised-button color="primary" type="submit">提交</button>
</form>

2. 关键修复点说明 #

• 完全移除ngModel：删掉模板里的[(ngModel)]和组件里相关变量，全程用formControlName和FormGroup管理表单状态。
• 强制触发验证：提交时调用markAllAsTouched()，确保所有字段的验证状态更新，视觉提示和逻辑判断保持一致。
• 有效性判断逻辑：直接通过userForm.valid判断，组件内已能直接访问表单实例，无需额外传参。
• 错误提示触发条件：用userForm.submitted配合touched，保证提交时即使字段未被手动触摸，也会显示错误提示。

3. 确保模块导入正确 #

在你的功能模块或AppModule里导入必要的模块：

import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    // 其他模块
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule
  ]
})
export class YourModule { }

内容的提问来源于stack exchange，提问作者Elliott Alderson