Блог

Главная - Вопросы по программированию - Привязка группы форм между TS и HTML

Привязка группы форм между TS и HTML

#angular #angular-reactive-forms #angular-forms

#angular #угловые реактивные формы #angular-forms

Вопрос:

Я впервые пытаюсь создать реактивную форму в Angular

Вот код :

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

@Component({
  selector: 'app-username-password',
  templateUrl: './username-password.component.html',
  styleUrls: ['./username-password.component.scss']
})
export class UsernamePasswordComponent implements OnInit {

  loginForm = new FormGroup({
    userName : new FormControl("Ashish"),
    password : new FormControl("")

  });

  // constructor() { }

  ngOnInit() {
  }

}

и HTML

 <div class="container">
    <h2>Login Form</h2>
    <form [formGroup]="loginForm">
        <label> User Name</label>
        <input formControlName="userName" , type="text" , class="form-control">
    </form>
    {{loginForm.value | json}}
</div>

HTML ничего не отображает.

Есть ли в этом ошибка?

Я получаю эту ошибку в комментариях введите описание изображения здесь

С уважением, Ashish

Комментарии:

1. <input formControlName="userName" , type="text" , class="form-control"> там не должно быть запятых. И даже после удаления запятых все еще не работает, можете ли вы проверить консоль на наличие ошибок

2. Это не так. Даже после удаления comas это не работает. Даже если я прокомментирую ввод, должна отображаться хотя бы метка. Четная метка не отображается.

3. Да, вот оно. Я думаю, что вы не импортировали ReactiveFormsModule

4. Почему отклонен ответ через один день, есть ли что-то не так в ответе?

Ответ №1:

Вам необходимо импортировать ReactiveFormsModule в AppModule или конкретный модуль, в котором находится ваш компонент

Например:

 ...

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

...

@NgModule({
  imports: [
    ...,
    ReactiveFormsModule,
    ...,
  ],
  declarations: [...],
  bootstrap: [AppComponent]
})
export class AppModule {}

Ответ №2:

Вы должны добавить ReactiveFormsModule в свой app.module.ts вот так:

 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';



@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { 

}

Ответ №3:

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

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

export class UsernamePasswordComponent implements OnInit {

  loginForm: FormGroup;

  // constructor() { }

  ngOnInit() {
        this.loginForm = new FormGroup({
          userName : new FormControl("Ashish"),
          password : new FormControl("")
        });
  }

}

Ответ №4:

Из-за ошибки мне кажется, что вы не импортировали ReactiveFormsModule в свой модуль, который содержит этот компонент.