Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    Problema con Angular e i form

    ciao!

    allora, ho un problema con i form e Angular.
    questo il mio template (login.component.html):
    codice:
    <form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)">
    ........
    </form>
    questo il login.component.ts:
    codice:
    import { Component, OnInit } from '@angular/core';
    import { Title } from '@angular/platform-browser';
    import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms';
    import { MessageService } from 'primeng/api';
    
    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css'],
      providers: [MessageService]
    })
    
    export class LoginComponent implements OnInit {
    
      submitted: boolean;
      description: string;
    
      constructor(private titleService: Title, private fb: FormBuilder, private messageService: MessageService) { }
    
      ngOnInit() {
        this.titleService.setTitle('Login');
        this.userform = new FormGroup({
          'username': new FormControl('', Validators.required),
          'password': new FormControl('', Validators.compose([Validators.required, Validators.minLength(6)]))
        });
      }
    
      onSubmit(value: string) {
        this.submitted = true;
        this.messageService.add({ severity: 'info', summary: 'Success', detail: 'Form Submitted' });
      }
    
      get diagnostic() { return JSON.stringify(this.userform.value); }
    }
    infine il mio app.module.ts:
    codice:
    // ANGULAR
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    // PRIMENG
    import { ToastModule } from 'primeng/toast';
    import { MessageModule } from 'primeng/message';
    import { PanelModule } from 'primeng/panel';
    // ALTRI
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { LoginComponent } from './login/login.component';
    
    @NgModule({
      declarations: [
        AppComponent,
        LoginComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        ToastModule,
        MessageModule,
        PanelModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    quando vado in http://localhost:4200/login ottengo questo errore:
    codice:
    Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'.
    ........
    qualche idea??
    Ultima modifica di fermat; 20-11-2018 a 13:24

  2. #2
    Utente di HTML.it
    Registrato dal
    Apr 2011
    residenza
    Arezzo
    Messaggi
    194
    prova ad importare da @angular/forms il ReactiveFormsModule (non il FormsModule)
    Riccardo Sadocchi
    Microsoft MCP C#

  3. #3
    ciao!

    questo problema l'ho avevo risolto importando questo modulo:
    codice:
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    ho fatto varie prove, e levandolo mi ridà errore.
    così invece tutto ok.

  4. #4
    Utente di HTML.it
    Registrato dal
    Apr 2011
    residenza
    Arezzo
    Messaggi
    194
    Si infatti va bene anche quello!
    Riccardo Sadocchi
    Microsoft MCP C#

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.