找不到“angular”，尝试从HTML表单中获取值并进行验证

Question

我是Angular的新手，我想使用qazxsw poi来检索HTML表单数据并从我的qazxsw poi验证它。

似乎angular.module('FooApp', []);甚至在我的IDE（Visual Studio Code）中都没有被识别。我不知道我需要使用的库。

我试图这样做（向下滚动到自定义验证）：.ts component file

HTML：

"angular"

.ts文件：

https://www.w3schools.com/angular/angular_validation.asp

错误：

<form [formGroup]="infoForm" (ngSubmit)="validateForm()" my-directive>

  <label>First Name </label> <input type="text" maxlength="25" name="first" 
autofocus required /><br><br>
  <label>Last Name </label> <input type="text" maxlength="25" name="last" 
required /><br><br>
....
</form>

<script src="data-form.component.ts"></script>

找不到名字，“棱角分明”。

我的项目结构：

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

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

export class DataFormComponent implements OnInit {

  infoForm: FormGroup;

  // The form values for a user
  constructor(private formBuilder: FormBuilder) {
     this.infoForm = this.formBuilder.group({
     firstName: ['', Validators.required],
     lastName: ['', Validators.required],
     ....
  })
 }

  clearForm() {
    // Get the Form names and make them null to clear the form
  }

  // Incomplete Implementation, where the error is
  validateForm() {

    // The error is here
    var app = angular.module('FooApp', []);

    if (this.infoForm.invalid) {
      return;

    }
  }

  ngOnInit() {
  }
}

要全面了解我在工作的环境

Answer 1

正如评论所说，你正在混合AngularJS和Angular。

在你的代码中：

您正在验证表单是否无效。如果要对每个控件执行此操作，可以从“infoForm”访问它们：

https://youtu.be/5wtnKulcquA?t=372

这里是this.infoForm.controls.firstName if (this infoForm.invalid) 中的信息图片

控件是FormControl类型。您可以检测它是否无效/触摸/脏/原始...

this.infoForm.controls.firstName.invalid