Warning: ngModel on the same form field as formControlName

Question

While executing the code I don't get any errors; I have a problem when I click the Update button. In other words, I receive this notice:

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.

product-list.component.html

  
        
          Products

  
            
                 
                      
                      
                              
                                      
                                    Product Data Deleted  
                              
                      
                      
                         
          
      
        
        
          
  
                
                    
                      Product Name  
                      Product Variety  
                      Product Origin  
                      Action  
                        
                    
                
                
                     
                      {{product.product_name}}  
                      {{product.product_variety}}  
                      {{product.product_origin}}  
                         
                          
                        
                       
                
            
        
       
      
      
              
                
                      
                  
                  
                  Update Product  
                    
                  
                  
                  
                  
                      
      
                          
                                  
                                    Product Name  
                                      
                                  
                          
                                  
                                    Product Variety  
                                      
                                  
                          
                                  
                                    Product Origin  
                                                         
                          
                        
                          Product Detail Updated!

product-list.component.ts

import { Component, OnInit } from '@angular/core';  
import { ProductService } from '../product.service';  
import { Product } from '../product';  
import { Observable,Subject } from "rxjs";  
  
import {FormControl,FormGroup,Validators} from '@angular/forms';  
  
@Component({  
  selector: 'app-product-list',  
  templateUrl: './product-list.component.html',  
  styleUrls: ['./product-list.component.css']  
})  
export class ProductListComponent implements OnInit {  
  
 constructor(private productservice:ProductService) { }  
  
  productsArray: any[] = [];  
  dtOptions: DataTables.Settings = {};  
  dtTrigger: Subject= new Subject();  
  
  products: Observable;  
  product : Product=new Product();  
  deleteMessage=false;  
  productlist:any;  
  isupdated = false;      
   
  
  ngOnInit() {  
    this.isupdated=false;  
    this.dtOptions = {  
      pageLength: 6,  
      stateSave:true,  
      lengthMenu:[[6, 16, 20, -1], [6, 16, 20, "All"]],  
      processing: true  
    };     
    this.productservice.getProductList().subscribe(data =>{  
    this.products =data;  
    this.dtTrigger.next();  
    })  
  }  
    
  deleteProduct(id: number) {  
    this.productservice.deleteProduct(id)  
      .subscribe(  
        data => {  
          console.log(data);  
          this.deleteMessage=true;  
          this.productservice.getProductList().subscribe(data =>{  
            this.products =data  
            })  
        },  
        error => console.log(error));  
  }  
  
  updateProduct(id: number){  
    this.productservice.getProduct(id)  
      .subscribe(  
        data => {  
          this.productlist=data             
        },  
        error => console.log(error));  
  }  
  
  productupdateform=new FormGroup({  
    product_id:new FormControl(),  
    product_name:new FormControl(),  
    product_variety:new FormControl(),  
    product_origin:new FormControl()  
  });  
  
  updateProd(updprod){  
    this.product=new Product();   
   this.product.product_id=this.ProductId.value;  
   this.product.product_name=this.ProductName.value;  
   this.product.product_variety=this.ProductVariety.value;  
   this.product.product_origin=this.ProductOrigin.value;  
   console.log(this.ProductOrigin.value);  
     
  
   this.productservice.updateProduct(this.product.product_id,this.product).subscribe(  
    data => {       
      this.isupdated=true;  
      this.productservice.getProductList().subscribe(data =>{  
        this.products =data  
        })  
    },  
    error => console.log(error));  
  }  
  
  get ProductName(){  
    return this.productupdateform.get('product_name');  
  }  
  
  get ProductVariety(){  
    return this.productupdateform.get('product_variety');  
  }  
  
  get ProductOrigin(){  
    return this.productupdateform.get('product_origin');  
  }  
  
  get ProductId(){  
    return this.productupdateform.get('product_id');  
  }  
  
  changeisUpdate(){  
    this.isupdated=false;  
  }

Rich Tillis · Accepted Answer

The Angular docs have a forms overview guide which describes different considerations when deciding which form design to use:

Reactive forms provide direct, explicit access to the underlying forms object model. Compared to template-driven forms, they are more robust: they're more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms.

Template-driven forms rely on directives in the template to create and manipulate the underlying object model. They are useful for adding a simple form to an app, such as an email list signup form. They're easy to add to an app, but they don't scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, template-driven forms could be a good fit.

I put together a small angular app containing both form types for reference. It does not include all the bells and whistles each form type offers but hopefully it will get you moving. Here is the github repo and the Stackblitz for reference.

Here is an example of the template-driven approach:



  
    Product Name Product Variety Product Origin Action
    
      
        {{product.product_name}}
        {{product.product_variety}}
        {{product.product_origin}}
        
          
        
      
    
  



  

    

    
      Product Name 
      
    

    
      Product Variety 
      
    

    
      Product Origin

//template-driven.component.ts
export class TemplateDrivenComponent {
  productlist: Observable = this.productservice.getProductList();
  isEditing = false;
  product_id: number;
  product_name: string;
  product_variety: string;
  product_origin: string;

  constructor(private productservice: ProductService) { }

  setProductForm(id: number) {
    const product: Product = this.productservice.getProduct(id);
    this.product_id = product.product_id;
    this.product_name = product.product_name;
    this.product_variety = product.product_variety;
    this.product_origin = product.product_origin;
    this.isEditing = true;
  }

  updateProduct() {
    let product: Product = new Product();
    product.product_id = this.product_id;
    product.product_name = this.product_name;
    product.product_origin = this.product_origin;
    product.product_variety = this.product_variety;
    this.productservice.updateProduct(product);
    this.resetForm();
  }

  resetForm() {
    this.isEditing = false;
    this.product_id = null;
    this.product_name = null;
    this.product_variety = null;
    this.product_origin = null;
  }
}

And here is an example of the reactive approach:



  
    
      
        Product Name
        Product Variety
        Product Origin
        Action
      
    
    
      
        {{product.product_name}}
        {{product.product_variety}}
        {{product.product_origin}}
        
          
        
      
    
  



  

    

    
      Product Name
        
      
    

    
      Product Variety
        
      
    

    
      Product Origin

//reactive.component.ts
export class ReactiveComponent implements OnInit {

  productupdateform: FormGroup;
  productlist: Observable = this.productservice.getProductList()
  isEditing = false;

  constructor(private productservice: ProductService, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.initializeForm();
  }

  initializeForm() {
    this.productupdateform = this.formBuilder.group({
      theProductId: [0],
      theProductName: ['', Validators.required],
      theProductVariety: [''],
      theProductOrigin: ['']
    })
  }

  setProductForm(id: number) {
    const product = this.productservice.getProduct(id);
    this.productupdateform.patchValue({
      theProductId: product.product_id,
      theProductName: product.product_name,
      theProductVariety: product.product_variety,
      theProductOrigin: product.product_origin
    });
    this.productupdateform.updateValueAndValidity();
    this.isEditing = true;
  }

  updateProduct() {
    let product: Product = {
      product_id: this.productupdateform.get('theProductId').value,
      product_name: this.productupdateform.get('theProductName').value,
      product_variety: this.productupdateform.get('theProductVariety').value,
      product_origin: this.productupdateform.get('theProductOrigin').value
    }
    this.productservice.updateProduct(product);
    this.resetForm();
  }

  isFormValid() {
    return true;
  }

  resetForm() {
    this.isEditing = false;
    this.initializeForm();
  }
}

I would recommend reading the angular docs and guides on forms. They are good.

Warning: ngModel on the same form field as formControlName

Answers (1)

Related Questions