时间戳

首页 > 解决方案 > 在 Angular 中创建组件时，浏览器给我“formGroup 需要一个 FormGroup 实例。请传入一个”

html - 在 Angular 中创建组件时，浏览器给我“formGroup 需要一个 FormGroup 实例。请传入一个”

问题描述

<html>
<div class="background">
  <div class="navigation"><nav></nav>
</div>


import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { AuthenticationService, User, AuthMessage, MessageTypes } from '../services/authentication.service';
import { Router } from '@angular/router';

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


export class LoginComponent implements OnInit {

    user: User = new User();
    message = AuthMessage;
    get MessageTypes() {
        return MessageTypes;
    }
    @Output() userName: EventEmitter<any> = new EventEmitter();
    constructor(private auth: AuthenticationService, private router: Router) { }

    ngOnInit() {
    }

    login() {
        this.auth.authenticate(this.user)
            .subscribe((res) => {
                if (res.success === true) {
                    this.userName.emit(this.user.name)
                    this.router.navigate(['project']);
                }
                else {
                    alert('Incorrect Username or Password');
                }
            });
    }
}
<html>
<div class="background">
  <div class="navigation"><nav></nav>
</div>
<div class="image"><img src="./assets/img/employers_holding_logo.png"></div>
  <div class="login container">
    <div class="title"><h4><b>PROJECT PORTAL<br /> Log In</b></h4></div>  
  <form class="form" *ngIf="message" [formGroup]="loginForm">
    <mat-form-field>
      <input formControlName="username" [(ngModel)]="user.name"  matInput placeholder="Username">
    </mat-form-field>

    <br />
    <mat-form-field class="full-width">
      <input type="Password" [(ngModel)]="user.pass" matInput placeholder="Password">
    </mat-form-field>
    <mat-checkbox
      [checked]="true"
      color="primary"
      formControlName="Remember my Username"
      >
      Remember my Username
      </mat-checkbox>

   
  <div>
      <button
      type="submit"
      class="btn btn-primary"
      value="Login"
    >
      Sign In
    </button>
    <br>
    <span> <u>Forgot Password</u> | <u>Need Help?</u></span>
  </div>

</form>
</div>
</div>
</html>

<div class="image"><img src="./assets/img/employers_holding_logo.png"></div>
  <div class="login container">
    <div class="title"><h4><b>PROJECT PORTAL<br /> Log In</b></h4></div>  
  <form class="form" *ngIf="" [formGroup]="loginForm">
    <mat-form-field>
      <input formControlName="username" [(ngModel)]="user.name"  matInput placeholder="Username">
    </mat-form-field>

    <br />
    <mat-form-field class="full-width">
      <input type="Password" [(ngModel)]="user.pass" matInput placeholder="Password">
    </mat-form-field>
    <mat-checkbox
      [checked]="true"
      color="primary"
      formControlName="Remember my Username"
      >
      Remember my Username
      </mat-checkbox>

    <div message *ngIf="(message | async)?.text"
    [ngClass]="{'warning':(message | async)?.type === MessageTypes.WARNING, 'error': (message | async)?.type === MessageTypes.ERROR}"
  >{{ (message | async)?.text }}</div>
  <div>
      <button
      type="submit"
      class="btn btn-primary"
      value="Login"
    >
      Sign In
    </button>
    <br>
    <span> <u>Forgot Password</u> | <u>Need Help?</u></span>
  </div>

</form>
</div>
</div>
</html>

标签： htmlangular

解决方案

推荐阅读