Início / coding / Perguntas / 79204415
Accepted
Vihung
Asked: 2024-11-20 01:09:04 +0800 CST

Como usar formulários reativos no Angular 18 sem NgModules

  • 772

Estou criando um novo aplicativo usando Angular 18.

> ng version
...
Angular CLI: 18.2.12
...

É um aplicativo independente (com roteamento), sem NgModules e sem app.modules.tsarquivo.

Quero usar Formulários Reativos.

Na minha classe de componente eu declarei

import { FormControl, FormGroup } from '@angular/forms';

e

  public foobarForm = new FormGroup({
    foo: new FormControl(''),
    bar: new FormControl(''),
  });

No meu arquivo HTML, eu tenho

<form [formGroup]="foobarForm">
  <input type="text" id="foo" name="foo" formControlName="foo" placeholder="Foo" />
  <input type="text" id="bar" name="bar" formControlName="bar" placeholder="Bar" />
  ...
</form>

Recebo os seguintes erros

Não é possível vincular a 'formGroup' porque não é uma propriedade conhecida de 'form'

e

Não é possível vincular a 'formControl' porque não é uma propriedade conhecida de 'input'.

Olhando a arte dos documentos oficiais (em https://angular.dev/guide/forms/reactive-forms ), parece que tenho que importar ReactiveFormsModuleno meu app.modules.ts. Mas não tenho um.

Qual é a maneira correta de usar Formulários Reativos em um aplicativo independente com versão > 17?

angular

1 respostas

  1. Best Answer

    Você também tem que importar o ReactiveFormsModuleno array imports do componente autônomo. O módulo contém as diretivas necessárias para que os formulários reativos funcionem como FormGroupDirective, FormControlDirective, que correspondem aos atributos [formGroup]e [formControl]no HTML.

    Não podemos importar essas diretivas diretamente, pois elas não são independentes.

    ...
import { ReactiveFormsModule } from '@angular/forms';
...

...
@Component({
   selector: 'app-root',
   template: `
     <form [formGroup]="foobarForm">
       <input type="text" id="foo" name="foo" [formControl]="foo" placeholder="Foo" />
       <input type="text" id="bar" name="bar" [formControl]="bar" placeholder="Bar" />
       ...
     </form>
   `,
   imports: [ReactiveFormsModule],
}) 
export class AppComponent {
  ....
}

    Demonstração do Stackblitz

    • 3

relate perguntas