I'm relatively new to Angular and I'm looking to utilize angular.module('FooApp', []); in order to fetch HTML form data and conduct validation within my .ts component file.
Unfortunately, it appears that "angular" isn't being recognized in my IDE (Visual Studio Code). I'm uncertain about the necessary library required for this task.
I'm attempting to follow this example (Scroll down to Custom Validation): 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 File:
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;
// Form values for a user
constructor(private formBuilder: FormBuilder) {
this.infoForm = this.formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
....
})
}
clearForm() {
// Reset form names to null for clearing form
}
// Incomplete Implementation, encountering an error here
validateForm() {
// The issue lies here
var app = angular.module('FooApp', []);
if (this.infoForm.invalid) {
return;
}
}
ngOnInit() {
}
}
The Error:
https://i.sstatic.net/5JR0R.png
Cannot find name, "angular".
My project structure:
https://i.sstatic.net/HjGyC.png
To better understand the environment I'm working in, watch this video https://youtu.be/5wtnKulcquA?t=372