Controls shown as required without validator (Reactive Form)

Post Reply
lovera87
Posts: 2
Joined: 22 Feb 2016, 15:50

28 Jul 2020, 04:50

I'm trying to create a simple reactive form but the UI is not working properly, the status change subscriber shows a valid form but the fields are showing errors

Code: Select all

<div class="layout-dashboard">
    <div class="p-grid ui-fluid">
        <div class="p-col-12 p-lg-6">
            <div class="card card-w-title">
                <h1>Alta Usuario</h1>
                <form class="p-grid" [formGroup]="altaForm" (ngSubmit)="onNuevoAlumno($event)">
                    <div class="p-col-12 p-lg-6">
                        <input pInputText placeholder="Primer Nombre" formControlName="primerNombre">
                    </div>
                </form>
                
            </div>
        </div>
    </div>
</div>

Code: Select all

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators, FormGroup, FormBuilder } from '@angular/forms';
import { UserService } from '../service/user.service';
import { ROLES_OPTIONS } from 'src/constants/roles';

@Component({
    templateUrl: './dashboard.component.html'
})
export class DashboardDemoComponent implements OnInit {

    constructor(private userService: UserService, private formBuilder: FormBuilder) {
        
    }

    rol_options = ROLES_OPTIONS;
    altaForm = this.formBuilder.group({
        primerNombre: new FormControl('')
    })
    
    ngOnInit() {
        
        this.altaForm.statusChanges.subscribe(result => {
            console.log(result);
        })

    }

    onNuevoAlumno(event){
       console.log(this.altaForm.value)
    }
}

Code: Select all

"dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@fullcalendar/core": "4.0.2",
    "@fullcalendar/daygrid": "4.0.1",
    "@fullcalendar/interaction": "4.0.2",
    "@fullcalendar/timegrid": "4.0.1",
    "chart.js": "2.7.3",
    "font-awesome": "4.7.0",
    "intl": "1.2.5",
    "primeflex": "^2.0.0-rc.1",
    "primeicons": "1.0.0",
    "primeng": "^9.1.3",
    "prismjs": "1.15.0",
    "quill": "1.1.8",
    "rxjs": "6.4.0",
    "tslib": "^1.10.0",
    "web-animations-js": "github:angular/web-animations-js#release_pr208",
    "zone.js": "~0.9.1"
  }
Please let me know if you need more details

merve7
Posts: 628
Joined: 12 Sep 2017, 10:44

17 Aug 2020, 13:08

Hi,
Did you add ReactiveFormsModule in your module class?? Like as;

Code: Select all

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

@NgModule({
    imports: [
        FormsModule,
        ReactiveFormsModule
    ],
})
export class InputTextDemoModule {}

Post Reply

Return to “Ecuador - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests