"angular" не найден, попытка получить значения и проверить из формы HTML - PullRequest
Новая
       22

"angular" не найден, попытка получить значения и проверить из формы HTML

0 голосов
/ 23 апреля 2019

Я новичок в Angular и хочу использовать angular.module('FooApp', []); для извлечения данных формы HTML и проверки их из моих .ts component file.

Кажется, что "angular" даже не распознается в моей IDE (Visual Studio Code).Я не знаю библиотеку, которая мне нужна для этого.

Я пытаюсь сделать это (прокрутите вниз до пользовательской проверки): https://www.w3schools.com/angular/angular_validation.asp

HTML: 

<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>

.ts Файл: 

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() {
  }
}

Ошибка:

enter image description here

Не удается найти имя, "angular".

Структура моего проекта:

enter image description here

Чтобы получить общее представление о том, в какой среде я работаю https://youtu.be/5wtnKulcquA?t=372

1 Ответ

1 голос
/ 23 апреля 2019

Как говорится в комментариях, вы смешиваете AngularJS и Angular.

В вашем коде: 

if (this infoForm.invalid)

Вы проверяете, является ли ваша форма недействительной. Если вы хотите сделать это для каждого элемента управления, вы можете получить к ним доступ из 'infoForm': 

this.infoForm.controls.firstName.invalid

Вот изображение информации в this.infoForm.controls.firstName Отладочная информация

Элемент управления имеет тип FormControl . Вы можете определить, является ли он недействительным / потрогал / грязный / нетронутый ...

Форма контроля официальной документации

...