Angular表单验证求助：实现非空校验及Bootstrap式红色提示

嗨，作为Angular初学者遇到这个问题太正常了，我来一步步帮你搞定它！

首先，你当前的代码有两个核心问题：

1. 组件里的event变量和输入框没有绑定关联，所以你点击按钮时判断的this.event === ''其实一直是空字符串，这就是控制台输出“nonono”的原因。
2. 缺少样式触发逻辑，就算判断出输入为空，也没法让输入框变成红色。

下面是具体的解决步骤：

1. 启用双向数据绑定 #

Angular的双向数据绑定需要依赖FormsModule，先在你的模块（比如AppModule）里导入它：

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

@NgModule({
  imports: [
    // 其他已有的导入项
    FormsModule
  ]
})
export class AppModule { }

然后在模板里给输入框加上双向绑定，把输入框的值和组件的event变量关联起来：

<input 
  id="event" 
  name="event" 
  type="text" 
  [(ngModel)]="event"
  [class.is-invalid]="event.trim() === '' && isSubmitted"
>
<button (click)="nStep()">OK</button>

2. 添加提交状态标记 #

在组件里新增一个isSubmitted变量，用来标记用户是否点击过提交按钮，这样只有点击按钮后才会显示错误样式（避免页面刚加载就显示红色输入框）：

import { Component, OnInit, EventEmitter, Output } from '@angular/core';

@Component({
 selector: 'app-step-event',
 templateUrl: './step-event.component.html',
 styleUrls: ['./step-event.component.css']
})
export class StepEventComponent implements OnInit {
 @Output() onNext = new EventEmitter<boolean>();
 event = '';
 isSubmitted = false; // 新增提交状态标记

 constructor() { }
 ngOnInit() { }

 nStep() {
  this.isSubmitted = true; // 点击按钮后标记为已提交
  if(this.event.trim() === ''){ // 用trim()处理输入纯空格的情况
    console.log("nonono");
    return;
  }
  console.log("event : OK");
  this.onNext.emit(true);
 }
}

3. 实现Bootstrap风格的红色提示 #

如果你的项目已经引入了Bootstrap，is-invalid类会自动让输入框边框变红，还可以添加错误提示文本：

<input 
  id="event" 
  name="event" 
  type="text" 
  [(ngModel)]="event"
  [class.is-invalid]="event.trim() === '' && isSubmitted"
>
<div class="invalid-feedback" *ngIf="event.trim() === '' && isSubmitted">
  此字段不能为空
</div>
<button (click)="nStep()">OK</button>

如果没引入Bootstrap，也可以自己写CSS样式，在step-event.component.css里添加：

.is-invalid {
  border-color: #dc3545;
}
.invalid-feedback {
  color: #dc3545;
  font-size: 0.875em;
  margin-top: 0.25rem;
}

这样修改后，点击OK按钮时：如果输入框为空，输入框会变成红色并显示错误提示；如果输入了有效内容，就会正常触发onNext事件。

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