Невозможно привязать к formGroup, так как это не известное свойство form в angular 7

Question

Я делаю вход в систему, используя веб-API с угловым 7, но когда я использую <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

В чистом HTML formGroup не определена, поэтому отладчик выдает ошибку. Вы можете перенести его в свой проект, импортировав ReactiveFormsModule из пакета @ angular / forms. Директива [formGroup] объявляется и экспортируется из ReactiveFormsModule.

Поскольку он экспортируется из ReactiveFormsModule, вы сможете использовать эту директиву в любом компоненте, который объявлен в модуле, который импортирует ReactiveFormsModule.

В директиве formGroup есть свойство @Input с именем formGroup, поэтому вы точно пытаетесь сделать так: свойство, связывающее экземпляр вашей formGroup в созданном вами файле ts, со свойством @Input, доступным внутри директивы formsGroup. .

Примечание: директива formGroup от ReactiveFormsModule является дочерней для вашего компонента. Чтобы общаться с ребенком, вы должны использовать привязку свойств в Angular. Вот что ты делаешь.

Один и тот же шаблон привязки свойств и привязки событий используется во всей среде Angular, понимание того, что это поможет легко работать с Angular 2+.

Answer 2

Вы должны определить formGroup в файле login.ts

Сначала импортируйте модуль форм и модуль «Реактивные формы» в модуль, где объявлен компонент входа в систему. Это должно выглядеть примерно так

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 и создайте группу форм. Она должна выглядеть следующим образом. Для этого вы можете использовать либо конструктор форм, либо другие методы. Более подробно перейдите по ссылке ниже. Угловые реактивные формы

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

  });



}