Angular 角度形式验证

我从角度开始，我有一个应用程序无法解决的错误。 我想检查我的表格是否有效，它是否为空。 如果是，则字段将变为红色，就像引导一样

以下是我的部分代码：

步骤-event.component.ts：

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { ViewChild } from '@angular/core/src/metadata/di';

@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 = ''
  constructor() { }

  ngOnInit() {
  }

  nStep() {
    if(this.event === ''){
      console.log("nonono");
      return;
    }
    console.log("event : OK");
    this.onNext.emit(true);
  }
}

从'@angular/core'导入{Component，OnInit，EventEmitter，Output}；
从“@angular/core/src/metadata/di”导入{ViewChild}；
@组成部分({
选择器：“应用程序步骤事件”，
templateUrl:'./step event.component.html'，
styleUrls:['./step event.component.css']
})
导出类StepEventComponent实现OnInit{
@Output（）onNext=新的EventEmitter（）；
事件=“”
构造函数（）{}
恩戈尼尼特（）{
}
nStep（）{
如果（this.event==''）{
控制台日志（“nono”）；
返回；
}
console.log（“事件：OK”）；
this.onNext.emit（true）；
}
}

步骤-event.component.html：

 <input id="event" name="event" type="text" #event>
<button (click)="nStep()">OK</button>

好啊

我从这段代码中得到的是，在控制台中我得到的结果：

nonono

---

感谢您的回答

为什么不改为这样做：

<input name="event" [(ngModel)]="event">

---

为什么不改为这样做：

<input name="event" [(ngModel)]="event">

---

尝试导入ElementRef和ViewChild

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';

那就申报吧

@ViewChild('event') event: ElementRef;

然后访问它

this.event.nativeElement.value

（意思）

---

也就是说，我建议创建一个实际的

---

并使用表单内置验证（即模板驱动或反应式）

尝试导入ElementRef和ViewChild

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';

那就申报吧

@ViewChild('event') event: ElementRef;

然后访问它

this.event.nativeElement.value

（意思）

---

也就是说，我建议创建一个实际的

---

使用表单内置验证（即模板驱动或反应式）

以下是代码，没有输出（向您解释）：

此行创建一个具有空值的FormControl，并声明该值是必需的

---

您可以在上找到所有这些内容，我强烈建议您阅读

这是代码，没有输出（向您解释）：

此行创建一个具有空值的FormControl，并声明该值是必需的

您可以在上找到所有这些内容，我强烈建议您阅读