TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Ale Picci
NA
5
21.1k
ngModel on the same form field as formControlName
Apr 10 2021 9:28 AM
Hi guys how can I fix this error in my Crud? I am using Angular 11
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.
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;
}
}
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>
Reply
Answers (
4
)
Iframe : how to pass username & password
Angular is not working ?