0

我正在使用 Angular 7 的 web api 进行登录，但是当我使用时，<form [formGroup]="loginForm" (submit)="loginFormSubmit()">我得到了错误，这段代码有什么问题。

在此处输入图像描述

login.component.html

<form [formGroup]="loginForm" (submit)="loginFormSubmit()">              
                <h2 class="text-center red heading text-heading">LOGIN</h2>
                <div class="form-group custom-input">
                    <div>
                        <span style="color: #D56161;" class="lblMessage"></span>
                    </div><br>
                    <div class="input-group">
                        <div class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="fa fa-user"></i>
                        </span>
                    </div>
                        <input class="form-control" data-val="true" data-val-required="required" formControlName="userId" placeholder="Username" type="text" value="">
                    <small class="text-danger" *ngIf="loginForm.form-control.userId.invalid && (loginFormSubmitted  || loginForm.controls.userId.touched)">Required</small>
                    </div>
                    <div style="text-align:left">
                        <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true" style="color:#D56161;"></span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="fa fa-lock"></i>
                        </span>
                    </div>
                        <input class="form-control" data-val="true" data-val-required="required" id="Password" formControlName="Password" placeholder="Password" type="password">
                        <small class="text-danger" *ngIf="loginForm.controls.password.invalid && (loginFormSubmitted || loginForm.controls.password.invalid)">Required</small>
                    </div>
                    <div style="text-align:left">
                        <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true" style="color:#D56161;"></span>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-block btn-primary button login" [disabled]="loginFormSubmitted">LOGIN <i class="fa fa-arrow-right"></i></button>
                </div>
                <hr>
                <div class="row">
                    <div class="col-lg-12">
                        <a class="float-left" href="/Admin/ForgotPassword">Forgot Password?</a>
                        <a class="float-right" href="">Back to Website</a>
                    </div>
                </div>
            </form>

登录组件.ts

import { Component } from '@angular/core';
import { ApiService } from '../../../../services/api/api.service';
import { Observable } from 'rxjs';

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

export class loginComponent{

    users$: object;

    constructor(private data: ApiService){
    }

    ngOnInit(){

    }

    loginFormSubmit(){
        alert('login alert');
    }

}

我该如何解决？

谢谢！

4

2 回答 2

2

您必须在 login.ts 文件中定义一个 formGroup

首先将 Forms Module 和 Reactive forms 模块导入到声明登录组件的模块中。它应该看起来像这样

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';





 @NgModule({
  declarations: [
    loginComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,

  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

接下来转到 login.ts 并构建一个表单组，它应该看起来像这样，您可以使用表单构建器或其他方法来执行此操作。更多请点击下面的链接。这里我使用了 Angular 反应表单下方的表单构建器

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

import { Validators } from '@angular/forms';

@Component({
  // your meta data
})
export class loginComponent implements OnInit {

  constructor(fb:FormBuilder) { }

  ngOnInit() {
  }

  private loginForm = this.fb.group({
    userId: ['',],
    // enter the other form controls in the group

  });



}
于 2018-10-27T08:45:39.250 回答
1

在纯 HTML formGroup 中没有定义，这就是调试器抛出错误的原因。您可以通过从 @angular/forms 包中导入 ReactiveFormsModule 将其带到您的项目中。[formGroup] 指令是从 ReactiveFormsModule 声明和导出的。

因为它是从 ReactiveFormsModule 导出的，所以您将能够在导入 ReactiveFormsModule 的模块中声明的任何组件中使用该指令。

在 formGroup 指令中有一个名为 formGroup 的 @Input 属性，因此您真正要做的是，将您创建的 ts 文件中的 formGroup 实例属性绑定到 formsGroup 指令中可用的@Input 属性。

注意：来自 ReactiveFormsModule 的 formGroup 指令是您的组件的子组件。要与孩子交流，您必须在 Angular 中使用属性绑定。这就是你在做什么。

整个 Angular 框架都使用相同的属性绑定和事件绑定模式，理解这一点将有助于轻松使用 Angular 2+。

于 2018-10-27T09:03:41.523 回答