Question

我正在使用角度为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>

login.component.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');
    }

}

我该如何解决？

谢谢！

Answer 1

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

首先将Forms模块和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 reactive forms

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

  });



}

Answer 2

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

由于它是从ReactiveFormsModule导出的，因此您可以在导入ReactiveFormsModule的模块中声明的任何组件中使用该指令。

在formGroup指令中有一个@Input属性，称为formGroup，因此您要尝试做的是，将在ts文件中创建的formGroup实例的属性绑定到FormsGroup指令中可用的@Input属性

注意：ReactiveFormsModule中的formGroup指令是组件的子级。要与孩子沟通，您必须在Angular中使用属性绑定。那就是你在做什么。

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

无法绑定到“ formGroup”，因为它不是角度7中“ form”的已知属性

2 个答案: