Angular Material 8 formControlName error - getting conflicting messages

Related searches

I am attempting to work with Angular Material (8) Reactive Forms. I am working on a Registration Form. I am getting errors that seem to contradict each other.

**

When I do it this way (file: register.component.html):

**

  <!-- Form -->
            <form [formGroup]="registerForm" class="text-center" style="color: #757575;">

                <div class="form-col">
                    <div class="col">
                        <!-- First name -->
                        <div class="md-form">
                            <input required type="text" id="materialRegisterFormFirstName" class="form-control" 
                            mdbInput   [(ngModel)]="user.firstname"/>
                            <label for="materialRegisterFormFirstName">First name</label>
                        </div>
                    </div>

[... snip ...]

**

I get this error:

**

ERROR Error: 
      ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
      formGroup's partner directive "formControlName" instead.  

So, I follow the instructions. When I use this approach (adding in formControlName="firstname"),

            <div class="form-col">
                <div class="col">
                    <!-- First name -->
                    <div class="md-form">
                        <input required type="text" id="materialRegisterFormFirstName" class="form-control" 
                        mdbInput formControlName="firstname"  [(ngModel)]="user.firstname"/>
                        <label for="materialRegisterFormFirstName">First name</label>
                    </div>
                </div>

[... snip ...]

**

I get the following error:

**

forms.js:2312 
    It looks like you're using ngModel on the same form field as formControlName. 
    Support for using the ngModel input property and ngModelChange event with 
    reactive form directives has been deprecated in Angular v6 and will be removed 
    in Angular v7.

    For more information on this, see our API docs here:
    https://angular.io/api/forms/FormControlName#use-with-ngmodel

When looking up the problem, I come across this in an old thread:

REFERENCE: ngModel on the same form field as formControlName
From Angular 7 and onward you can't use both formControlName and ngModel together. If you want to use template-driven forms you can go with ngModel and if you want to use reactive forms you can't go with ngModel. (Simple)

**

It sounds like it is saying to remove the formControlName reference. How can this problem be resolved?

**

TIA


That is because you are using template-driven and reactive form at the same time. You need to use it one of them, you cant use both at same time.

Syntax of template driven form is as below.

.html file

<div class="row">
  <div class="col-xs-12">
    <form (ngSubmit)="onSubmit()">
      <div class="row">
        <div class="col-sm-5 form-group">
          <label for="courseName">Course Name</label>
          <input
            type="text"
            id="courseName"
            class="form-control"
            name="courseName"
            ngModel>
        </div>
        <div class="col-sm-2 form-group">
          <label for="courseDesc">Course Description</label>
          <input
            type="text"
            id="courseDesc"
            class="form-control"
            name="courseDesc"
            ngModel>
        </div>
        <div class="col-sm-2 form-group">
          <label for="courseAmount">Course Amount</label>
          <input
            type="number"
            id="courseAmount"
            class="form-control"
            name="courseAmount"
            ngModel>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <button
            class="btn btn-success"
            type="submit">Add</button>
          <button
            class="btn btn-danger"
            type="button">Delete</button>
          <button class="btn btn-primary" type="button">Clear</button>
        </div>
      </div>
    </form>
  </div>
</div>

.ts file

onSubmit(form: NgForm) {
    console.log("Course Name is : " + form.value.courseName);
    console.log("Course Desc is : " + form.value.courseDesc);
    console.log("Course Amount is : " + form.value.courseAmount);    
  }

Syntax for Reactive Form as below

.html file.

<div class="row">
  <div class="col-xs-12">
    <form [formGroup]="courseForm" (ngSubmit)="onSubmit()">
      <div class="row">
        <div class="col-sm-5 form-group">
          <label for="courseName">Course Name</label>
          <input
            type="text"
            id="courseName"
            class="form-control"
            formControlName="courseName">
        </div>
        <div class="col-sm-2 form-group">
          <label for="courseDesc">Course Description</label>
          <input
            type="text"
            id="courseDesc"
            class="form-control"
            formControlName="courseDesc">
        </div>
        <div class="col-sm-2 form-group">
          <label for="courseAmount">Course Amount</label>
          <input
            type="number"
            id="courseAmount"
            class="form-control"
            formControlName="courseAmount">
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <button
            class="btn btn-success"
            type="submit">Add</button>
          <button
            class="btn btn-danger"
            type="button">Delete</button>
          <button class="btn btn-primary" type="button">Clear</button>
        </div>
      </div>
    </form>
  </div>
</div>

.ts file

this.courseForm = new FormGroup({
          'courseName': new FormControl(null, Validators.required),
          'courseDesc': new FormControl([Validators.required, Validators.minLength(100)]),
          'courseAmount': new FormControl(null)
        });

for more reference visit

Angular Material 8 formControlName error – getting conflicting , Angular Material 8 formControlName error – getting conflicting messages. Posted on February 14, 2020 by Casey Harrils. I am attempting to work with Angular� Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.


You Cannot use both ngModel and FormControlName or ngModel and formGroup together. Because ngModel is a template forms driven whereas FormControlName and FormGroup are reactive forms driven.

If you want to use both together you are increasing the complexity of the application. If you want to access the value through formControlName then use it like

    <form [formGroup]="registerForm" class="text-center" style="color: #757575;">
      <div class="form-col">
       <div class="col">
        <div class="md-form">
         <input formControlName="firstName" type="text" id="materialRegisterFormFirstName" class="form-control" mdbInput/>
          <label for="materialRegisterFormFirstName">First name</label>
        </div>
       </div>
     </div>
   </form>

In component.ts file write like

registerForm = new FormGroup({
    firstName: new FormControl([Validator.required]),
});

or else you can build formgroup using formbuilder, fb is an instance of formBuilder

this.registerForm = fb.group({
    'fullname': ['', Validators.required],
});

and you can read value like this

this.user.firstName = this.registerForm.get('firstName').value;

Angular Forms Guide: Template Driven and Reactive Forms, In this post we will see how the Angular 2 Forms API works and how it can be properly displaying error messages to the user so that the user knows what to do to make the form valid If we want to get only the validation functionality of ngModel without Reactive vs Template Driven: can they be mixed? UI component infrastructure and Material Design components for mobile and desktop Angular web applications.


Use [ngModelOptions]="{ standalone: true }" on the input element

Angular 8/9 Reactive Forms Validation with Angular Material 8, Create an Angular 8/9 Reactive form with Angular Material forms - We'll be As we know, there are 2 types of Form types offered by Angular 8/9. aria-label=" Select an option" formControlName="gender"> myForm.get('dob'). file and add the angular material form control errors something like this. Angular FormControl is an inbuilt class that is used to get and set values and validation of the form control fields like <input> or <select>. The FormControl tracks the value and validation status of an individual form control. It can be used standalone as well as with a parent form. Types of Angular Forms


since you are using reactive forms , no need to use ngModelin your input fields use formControlName insted. ngModel is used in template driven froms

<div class="md-form">
  <input required type="text" id="materialRegisterFormFirstName" class="form-control" 
   mdbInput formControlName="firstname"/>
  <label for="materialRegisterFormFirstName">First name</label>
</div>

here you can find better examples https://v8.angular.io/guide/reactive-forms

(Reactive Forms)Radio name and formControlName must match in , The error message seems to be inaccurate for radio controls inside of a FormGroup . Just getting the reactive form value json object does not include that. Also, I don't use mixed FormData of course. angular-automatic-lock-bot bot locked and limited conversation to collaborators on Sep 13, 2019. In this article, we’re going to learn how to develop a generic method that displays validation errors in Angular’s form. I will walk you through the process and ideas behind the decisions I made along the way. As always, to get a taste of what I’m talking about, let’s first take a look at a nice visualization of the final result:


Angular Material 2, Angular Material 2 - handling multiple validation error messages - angular. A great way to get working examples is to review/search the Angular 2 Material GIT repo. <input formControlName="mobile" matInput placeholder="Mobile*"> < mat-error *ngIf="service.form.controls['mobile'].errors?.minlength">Minimum 8� In this Angular 8 form validation tutorial, we will show you how to create public message for the form validation and custom validation rules.


Tags : Angular Angular 6 Angular 7 Angular 8 Angular 9 Hardik Savani My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech.


Step-2: We need to configure our GlobalErrorHandlerService in application module in providers metadata of @NgModule as following.