problem with formGroup

Topic: problem with formGroup

rdelfiaco pro asked 5 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)],
        });
    }
}


https://mdbootstrap.com/angular/forms/input-validation/

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

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:
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><form [formGroup]="validatingForm">

<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></pre>
</div>
<div>.ts:</div>
<div>
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">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)],

});

}

}</pre>
</div>
</div>
<div>Also, please paste me here your app.module.ts code.</div>
Best Regards,

Damian

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

rdelfiaco

Pro User 10Support score
2Questions 0Answers 1Snippets