проблема: вывод / веб-страница не видны в браузере, когда я запускаю программу. Я работаю над кодом Visual Studio для создания формы входа. я что-то здесь упускаю. ниже приведен код компонентов.
login.component. html class
<div class="container">
<form #loginForm="ngForm" (ngSubmit)="submitLoginForm(loginForm)" style="background-color: aqua; ">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<h2>login</h2>
</div>
<div class="col-md-4">
<h2 style="text-align: center;color: brown;font-size: small;">all fields
are mandatory
</h2>
<div class="form-group">
<div class="col" style="text-align: right;">
<label>emailId</label>
</div>
<div class="col; input-group">
<input type="email" name="email" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col" style="text-align: right;">
<lable> password</lable>
</div>
<div class="col; input-group">
<input type="password" name="password" class="form-control">
</div>
</div>
<div class="form-group" style="text-align:left">
<button type="submit" class="btn">Login</button>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</form>
</div>
login.component.ts class
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor() { }
submitLoginForm(form : NgForm){
console.log(form.value.email);
console.log(form.value.password);
}
ngOnInit() {
}
}
app. компонент. html класс
<div style="text-align:center">
<h1>
Welcome
</h1>
<p>
<app-login></app-login>
</p>
</div>
класс app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'QuickKartApp';
}
класс app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
указатель. html класс
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>QuickKartApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
ошибка в консоли
Uncaught Error: Template parse errors:
'lable' is not a known element:
1. If 'lable' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("rm-group">
<div class="col" style="text-align: right;">
[ERROR ->]<lable> password</lable>
</div>
<div class="col; input-group""): ng:///AppModule/LoginComponent.html@22:24
at syntaxError (compiler.js:2175)
at TemplateParser.parse (compiler.js:11169)
at JitCompiler._parseTemplate (compiler.js:25541)
at JitCompiler._compileTemplate (compiler.js:25529)
at compiler.js:25473
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:25473)
at compiler.js:25386
at Object.then (compiler.js:2166)
at JitCompiler._compileModuleAndComponents (compiler.js:25385)