problem with formGroup


Topic: problem with formGroup

rdelfiaco pro asked 6 years ago

Dear, I'm trying to use FormGoup is not working, the steps I did: I created a variable "loginForm: FormGroup;" and I imported FormGroup anyway so it does not work on .ts when I put the <form [formGroup] = "LoginForm"> in the .html component to run. After, I'm not able to simulate the example below in the "ng-uikit-pro-standard-compile-master" template, just set the stop constructor to run. When using in new design without using the "", that is, only using the Angular, Bootstrap wheel. Is there anything I have not done?
 
<form [formGroup]="validatingForm"> <div class="md-form"> <input mdbInputDirective type="number" id="form4" class="form-control" data-error="wrong number" data-success="right number" formControlName="min"> <label for="form4">min value validator</label> </div> </form>
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
    selector: 'validators-component-example',
    templateUrl: 'validators-example.html',
})

export class ValidatorsComponent {

    validatingForm: FormGroup;
    constructor(private fb: FormBuilder) {
    this.validatingForm = fb.group({
        'min': [null, Validators.min(10)],
        });
    }
}
 

Damian Gemza staff answered 6 years ago

Dear rdelfiaco, I have tried to reproduce your problem but without success. For me, your code is working fine. Could you please confirm, if you're have created ValidatorsComponent in your application? Also, please check if you have imported FormsModule and ReactiveFormsModule in your app.module.ts file. Those modules are necessary in case of use Angular Validation with FormGroup. Below you can find my code which is working just fine. Please check it. .html:
<form [formGroup]="validatingForm">

<div class="md-form">

<input mdbInputDirective type="number" id="form4" class="form-control" data-error="wrong number" data-success="right number"

formControlName="min">

<label for="form4">min value validator</label>

</div>

</form>
.ts:
import { Component } from '@angular/core';

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

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss'],

})

export class AppComponent {

validatingForm:FormGroup;

constructor(privatefb:FormBuilder) {

this.validatingForm=fb.group({

'min': [null, Validators.min(10)],

});

}

}
Also, please paste me here your app.module.ts code.
Best Regards, Damian
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: MAC-PRO
  • Browser: Chrome
  • OS: IOS
  • Provided sample code: No
  • Provided link: Yes
Tags