How to solve problem with ngModel and formControlName in Angular

0
votes

I created a crud project in Angular; the execution gives me no errors, only I have a problem with the Update button.

When I click this button, the relevant student details window does not open. By checking on the web console. I get the following warning:

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 a future version of Angular.

student-list.component.html

<div class="panel panel-default">  
      <div class="panel-heading">  
          <h1 style="text-align: center">Students</h1><br>  
          <div class="row" [hidden]="!deleteMessage">  
                 
                    <div class="col-sm-4"></div>  
                    <div class="col-sm-4">  
                            <div class="alert alert-info alert-dismissible">  
                                    <button type="button" class="close" data-dismiss="alert">×</button>  
                                    <strong>Student Data Deleted</strong>  
                            </div>  
                    </div>  
                    <div class="col-sm-4"></div>  
            </div>             
        </div>  
      
        
      <div class="panel-body">  
          <table  class="table table-hover table-sm" datatable [dtOptions]="dtOptions"  
          [dtTrigger]="dtTrigger"  >  
              <thead class="thead-light">  
                  <tr>  
                      <th>Student Name</th>  
                      <th>Student Email</th>  
                      <th>Student Branch</th>  
                      <th>Action</th>  
                        
                  </tr>  
              </thead>  
              <tbody>  
                   <tr *ngFor="let student of students ">  
                      <td>{{student.student_name}}</td>  
                      <td>{{student.student_email}}</td>  
                      <td>{{student.student_branch}}</td>  
                      <td><button (click)="deleteStudent(student.student_id)" class='btn btn-primary'><i class="fa fa-futboll-0">Delete</i></button>   
                        <button (click)="updateStudent(student.student_id)" class='btn btn-info'  
                        data-toggle="modal" data-target="#myModal">Update</button>  
                      </td>  
                    </tr>   
              </tbody><br>  
          </table>  
      </div>  
    </div>   
      
    <div class="modal" id="myModal">  
            <div class="modal-dialog">  
              <div class="modal-content">  
                    <form [formGroup]="studentupdateform" #updstu (ngSubmit)="updateStu(updstu)">  
                <!-- Modal Header -->  
                <div class="modal-header">  
                  <h4 class="modal-title" style="text-align: center">Update Student</h4>  
                    
                </div>  
                  
                <!-- Modal body -->  
                <div class="modal-body" *ngFor="let student of studentlist " >  
                    <div [hidden]="isupdated">  
      
                        <input type="hidden" class="form-control"  formControlName="student_id" [(ngModel)]="student.student_id">  
                                <div class="form-group">  
                                    <label for="name">Student Name</label>  
                                    <input type="text" class="form-control"  formControlName="student_name" [(ngModel)]="student.student_name"  >  
                                </div>  
                          
                                <div class="form-group">  
                                    <label for="name">Student Email</label>  
                                    <input type="text" class="form-control" formControlName="student_email" [(ngModel)]="student.student_email">  
                                </div>  
                          
                                <div class="form-group">  
                                    <label for="name">Student Branch</label>  
                                      <select class="form-control" formControlName="student_branch" required>                                     
                                        <option value="B-Tech" [selected]="'B-Tech' == student.student_branch">B-Tech</option>  
                                        <option value="BCA" [selected]="'BCA' == student.student_branch">BCA</option>  
                                        <option value="MCA" [selected]="'MCA' == student.student_branch" >MCA</option>  
                                        <option value="M-Tech" [selected]="'M-Tech' == student.student_branch">M-Tech</option>  
                                      </select>                                 
                                </div>                     
                      </div>    
                      <div [hidden]="!isupdated">  
                          <h4>Student Detail Updated!</h4>  
                      </div>          
                          
                </div>  
                  
                <!-- Modal footer -->  
                <div class="modal-footer" >  
                  <button type="submit" class="btn btn-success" [hidden]="isupdated">Update</button>  
                  <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()">Close</button>  
                </div>  
                  
            </form>  
              </div>  
            </div>  
          </div>

student-list.component.ts

import { Component, OnInit } from '@angular/core';  
import { StudentService } from '../student.service';  
import { Student } from '../student';  
import { Observable,Subject } from "rxjs";  
  
import {FormControl,FormGroup,Validators} from '@angular/forms';  
  
@Component({  
  selector: 'app-student-list',  
  templateUrl: './student-list.component.html',  
  styleUrls: ['./student-list.component.css']  
})  
export class StudentListComponent implements OnInit {  
  
 constructor(private studentservice:StudentService) { }  
  
  studentsArray: any[] = [];  
  dtOptions: DataTables.Settings = {};  
  dtTrigger: Subject<any>= new Subject();  
  
  students: Observable<Student[]>;  
  student : Student=new Student();  
  deleteMessage=false;  
  studentlist: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.studentservice.getStudentList().subscribe(data =>{  
    this.students =data;  
    this.dtTrigger.next();  
    })  
  }  
    
  deleteStudent(id: number) {  
    this.studentservice.deleteStudent(id)  
      .subscribe(  
        data => {  
          console.log(data);  
          this.deleteMessage=true;  
          this.studentservice.getStudentList().subscribe(data =>{  
            this.students =data  
            })  
        },  
        error => console.log(error));  
  }  
  
  updateStudent(id: number){  
    this.studentservice.getStudent(id)  
      .subscribe(  
        data => {  
          this.studentlist=data             
        },  
        error => console.log(error));  
  }  
  
  studentupdateform=new FormGroup({  
    student_id:new FormControl(),  
    student_name:new FormControl(),  
    student_email:new FormControl(),  
    student_branch:new FormControl()  
  });  
  
  updateStu(updstu){  
    this.student=new Student();   
   this.student.student_id=this.StudentId.value;  
   this.student.student_name=this.StudentName.value;  
   this.student.student_email=this.StudentEmail.value;  
   this.student.student_branch=this.StudentBranch.value;  
   console.log(this.StudentBranch.value);  
     
  
   this.studentservice.updateStudent(this.student.student_id,this.student).subscribe(  
    data => {       
      this.isupdated=true;  
      this.studentservice.getStudentList().subscribe(data =>{  
        this.students =data  
        })  
    },  
    error => console.log(error));  
  }  
  
  get StudentName(){  
    return this.studentupdateform.get('student_name');  
  }  
  
  get StudentEmail(){  
    return this.studentupdateform.get('student_email');  
  }  
  
  get StudentBranch(){  
    return this.studentupdateform.get('student_branch');  
  }  
  
  get StudentId(){  
    return this.studentupdateform.get('student_id');  
  }  
  
  changeisUpdate(){  
    this.isupdated=false;  
  }

Here the code after the change:

student-list.component.ts

import { Component, OnInit } from '@angular/core';  
import { StudentService } from '../student.service';  
import { Student } from '../student';  
import { Observable,of,Subject } from "rxjs";  
  
import {FormControl,FormGroup,Validators} from '@angular/forms';  
  
@Component({  
  selector: 'app-student-list',  
  templateUrl: './student-list.component.html',  
  styleUrls: ['./student-list.component.css']  
})  
export class StudentListComponent implements OnInit {  
  
 constructor(private studentservice:StudentService) { }  
  
  studentsArray: any[] = [];  
  dtOptions: DataTables.Settings = {};  
  dtTrigger: Subject<any>= new Subject();  
  
  students: Observable<Student[]> | undefined;  
  student : Student=new Student();  
  deleteMessage=false;  
  studentlist: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.studentservice.getStudentList().subscribe(data =>{  
    this.students =of(data);  
    this.dtTrigger.next();  
    })  
  }
    
  deleteStudent(id: number) {  
    this.studentservice.deleteStudent(id)  
      .subscribe(  
        data => {  
          console.log(data);  
          //this.deleteMessage=true;  
          this.studentservice.getStudentList().subscribe(data =>{  
            this.students =of(data)
            window.location.reload();
            })  
        },  
        error => console.log(error));  
  }  
  
  updateStudent(id: number){  
    this.studentservice.getStudent(id)  
      .subscribe(  
        data => {  
          this.studentlist=data             
        },  
        error => console.log(error));  
  }  
  
  studentupdateform=new FormGroup({  
    student_id:new FormControl(this.student.student_id),  
    student_name:new FormControl(this.student.student_name),  
    student_email:new FormControl(this.student.student_email),  
    student_branch:new FormControl(this.student.student_branch)  
  });  
  
  updateStu(updstu: any){  
    this.student=new Student();   
   this.student.student_id=this.StudentId!.value;  
   this.student.student_name=this.StudentName!.value;  
   this.student.student_email=this.StudentEmail!.value;  
   this.student.student_branch=this.StudentBranch!.value;  
   console.log(this.StudentBranch!.value);  
     
  
   this.studentservice.updateStudent(this.student.student_id!,this.student).subscribe(  
    data => {       
      this.isupdated=true;  
      this.studentservice.getStudentList().subscribe(data =>{  
        this.students =data  
        })  
    },  
    error => console.log(error));  
  }  
  
  get StudentName(){  
    return this.studentupdateform.get('student_name');  
  }  
  
  get StudentEmail(){  
    return this.studentupdateform.get('student_email');  
  }  
  
  get StudentBranch(){  
    return this.studentupdateform.get('student_branch');  
  }  
  
  get StudentId(){  
    return this.studentupdateform.get('student_id');  
  }  
  
  changeisUpdate(){  
    this.isupdated=false;  
  }  
}

student-list.component.html

<div class="panel panel-default">  
    <div class="panel-heading">  
        <h1 style="text-align: center">Students</h1><br>  
        <div class="row" [hidden]="!deleteMessage">  
               
                  <div class="col-sm-4"></div>  
                  <div class="col-sm-4">  
                          <div class="alert alert-info alert-dismissible">  
                                  <button type="button" class="close" data-dismiss="alert">×</button>  
                                  <strong>Student Data Deleted</strong>  
                          </div>  
                  </div>  
                  <div class="col-sm-4"></div>  
          </div>             
      </div>  
    
      
    <div class="panel-body">  
        <table  class="table table-hover table-sm" datatable [dtOptions]="dtOptions"  
        [dtTrigger]="dtTrigger"  >  
            <thead class="thead-light">  
                <tr>  
                    <th>Student Name</th>  
                    <th>Student Email</th>  
                    <th>Student Branch</th>  
                    <th>Action</th>  
                      
                </tr>  
            </thead>  
            <tbody>  
                 <tr *ngFor="let student of students | async">  
                    <td>{{student.student_name}}</td>  
                    <td>{{student.student_email}}</td>  
                    <td>{{student.student_branch}}</td>  
                    <td><button (click)="deleteStudent(student.student_id!)" class='btn btn-primary'><i class="fa fa-futboll-0">Delete</i></button>   
                      <button (click)="updateStudent(student.student_id!)" class='btn btn-info'  
                      data-toggle="modal" data-target="#myModal">Update</button>  
                    </td>  
                  </tr>   
            </tbody><br>  
        </table>  
    </div>  
  </div>   
    
  <div class="modal" id="myModal">  
          <div class="modal-dialog">  
            <div class="modal-content">  
                  <form [formGroup]="studentupdateform" #updstu (ngSubmit)="updateStu(updstu)">  
              <!-- Modal Header -->  
              <div class="modal-header">  
                <h4 class="modal-title" style="text-align: center">Update Student</h4>  
                  
              </div>  
                
              <!-- Modal body -->  
              <div class="modal-body" *ngFor="let student of studentlist " >  
                  <div [hidden]="isupdated">  
    
                      <input type="hidden" class="form-control"  formControlName="student_id" >  
                              <div class="form-group">  
                                  <label for="name">Student Name</label>  
                                  <input type="text" class="form-control"  formControlName="student_name" [value]="student.student_name"  >  
                              </div>  
                        
                              <div class="form-group">  
                                  <label for="name">Student Email</label>  
                                  <input type="text" class="form-control" formControlName="student_email" [value]="student.student_email">  
                              </div>  
                        
                              <div class="form-group">  
                                  <label for="name">Student Branch</label>  
                                    <select class="form-control" formControlName="student_branch" required [value]="student.student_branch">                                     
                                      <option value="B-Tech" [selected]="'B-Tech' == student.student_branch">B-Tech</option>  
                                      <option value="BCA" [selected]="'BCA' == student.student_branch">BCA</option>  
                                      <option value="MCA" [selected]="'MCA' == student.student_branch" >MCA</option>  
                                      <option value="M-Tech" [selected]="'M-Tech' == student.student_branch">M-Tech</option>  
                                    </select>                                 
                              </div>                     
                    </div>    
                    <div [hidden]="!isupdated">  
                        <h4>Student Detail Updated!</h4>  
                    </div>          
                        
              </div>  
                
              <!-- Modal footer -->  
              <div class="modal-footer" >  
                <button type="submit" class="btn btn-success" [hidden]="isupdated">Update</button>  
                <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()">Close</button>  
              </div>  
                
          </form>  
            </div>  
          </div>  
        </div>
1
angular
Remove [(ngModel)] from the input fields. In reactive forms we shouldn't be using it. – Zam Abdul Vahid
I tried to remove it, writing the code like this: <input type="hidden" class="form-control" formControlName="student_id" > It just doesn't change anything. Did I do something wrong? – Jad-v-a

1 Answers

0
votes

Here is a stripped version of your code on how to use reactive form without ngModel.

student: any;
studentupdateform: FormGroup;
formData: any;

constructor() {}

ngOnInit() {
  this.student = {
    student_id: 10,
    student_name: "Zam",
    student_email: "test@test.com",
    student_branch: "MCA"
  };
  this.configureForm();
}

configureForm() {
  this.studentupdateform = new FormGroup({
    student_id: new FormControl(this.student.student_id),
    student_name: new FormControl(this.student.student_name),
    student_email: new FormControl(this.student.student_email),
    student_branch: new FormControl(this.student.student_branch)
  });
}

updateStudent() {
  this.formData = this.studentupdateform.value;
}


//Your html template
<form [formGroup]="studentupdateform" #updstu (ngSubmit)="updateStudent()">

   <input type="hidden" class="form-control"  formControlName="student_id">

   <div class="form-group">
     <label for="name">Student Name</label>
       <input type="text" class="form-control"  formControlName="student_name" [value]="student.student_name">
   </div>

   <div class="form-group">
     <label for="name">Student Email</label>
     <input type="text" class="form-control" formControlName="student_email" [value]="student.student_email">
   </div>

   <div class="form-group">
     <label for="name">Student Branch</label>
     <select class="form-control" formControlName="student_branch" required [value]="student.student_branch">
        <option value="B-Tech" [selected]="'B-Tech' == student.student_branch">B-Tech</option>  
        <option value="BCA" [selected]="'BCA' == student.student_branch">BCA</option>  
        <option value="MCA" [selected]="'MCA' == student.student_branch" >MCA</option>  
        <option value="M-Tech" [selected]="'M-Tech' == student.student_branch">M-Tech</option>  
     </select>
  </div>

  <br />
  <div class="footer">
    <button type="submit" class="btn btn-success">Update</button>
  </div>

</form>
<p>{{formData | json}}</p>

Stackblitz - https://stackblitz.com/edit/angular-q5z3pr?file=src/app/app.component.ts