تعديل بيانات المستخدم والتعرف على كيفية تمرير parameters بالمكون

درسنا لهدا اليوم حو تعديل بيانات المستخدم UPDATE ..سنختصر الخطوات بهده النقاط

1.انشاء زر تعديل العضو بجدول المستخدمين

2. نضيف المسار الدي انشئناه الى ملف routing 

3. نقوم بانشاء مكون edit component

4. ننشيء فورم التعديل 

5. نقوم بجلب بيانات المستخدم المراد تعديله من السرفر ونطابقه في فورم التعديل لتظهر البيانات

6. ننشيء دالة submit التي تقوم بتعديل البيانات الجديدة في حال الضغط على زر التعديل

التفاصيل

اول شيء يجب انشاء زر التعديل بجدول المستخدمين  الموجود بالـ app.component

ندخل الى ملف الـ template  ونضيف <td>  جديد بداخله زر التعديل جنب كل مستخدم

            <td><a [routerLink]="['/user/edit', user.id ]" class="btn btn-info" >Edit</a></td>

ليصبح الجدول هكدى

 <table *ngIf='users' class="table table-dark">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Username</th>
        <th scope="col">Email</th>
        <th scope="col">password</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
        <tr *ngFor='let user of users'>
            <th scope="row">{{  user.id  }}</th>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.password }}</td>
            <td><a [routerLink]="['/user/edit', user.id ]" class="btn btn-info" >Edit</a></td>
        </tr>
    </tbody>
  </table>

أضف الـ route الجديد الى ملف routing.module

const routes: Routes = [
  {path: 'register',component: RegisterComponent,} , 
  {path: 'user/edit/:id',component: EditComponent,} ,  //  لاحظ أن هدا المسار يحتاج لتمرير   id+
];

نقوم بانشاء المكون ولنسمه edit  من اجل تعديل بيانات مستخدم معين 

قم بانشاء المكون عن طريق سطر الأوامر أو قم بنسخ مكون register وغير اسمه الى edit ثم تضيفه الى ملف module

ng g c users/edit --module app

ضع فورم التعديل ولنقل أنه شبيه بفورم register  

<h1>Update user Form </h1>
<form [formGroup]="_updateForm" (ngSubmit)="onSubmit(_updateForm.value)">
 
    <div class="form-group">
      <label>Username</label>
      <input class="form-control" [formControl]="_updateForm.controls['username']">
     </div>

     <div class="form-group">
        <label>Email</label>
        <input class="form-control" [formControl]="_updateForm.controls['email']">
       </div>


     <div class="form-group">
            <label>Password</label>
            <input class="form-control" type="password" placeholder="password" [formControl]="_updateForm.controls['password']" >
     </div>

     <button type="submit" [disabled]="!_updateForm.valid ">تعديل </button>
</form>

الأن يجب علينا ان نجلب بيانات العضو المراد تعديله من السرفر  .حيث يتوجب علينا أولا ان ننشيء دالة بملف service  ولنسمها مثلا  getUser  وستأخد مسار ويكون داخل هدا المسار الـ  id  الخاص بالمستخدم المراد جلبه 

هده الدالة سنقوم بمناداتها لاحقا بملف edit.component 

نفتح ملف الخدمة  users.service  ونضيف الدالة

getUser(url:string){  // http://localhost/webapi/api.php/users/1?transform=1 مثال عن المسار
  return  this.httpClient.get(url)
     .pipe(
       map(res => res) 
     );
 }

لاحظ اننا استخدمنا ميثود GET لأننا نود جلب بيانات وقد تم شرح دلك بدرس api  لدا وجب الرجوع للدرس ادا لم تفهم سبب استعمال GET

الأن سنعود للمكون من اجل تمهيد الفورم

أول شيء يجب التفكير به بداخل المكون edit  هو جلب بيانات المستخدم الدي ضغطنا عليه ووضعها بالفورم لكي تظهر البيانات بالمتصفح

وجلب البيانات ستكون بداخل دالة init

  ngOnInit() { 
      this.activatedRoute.params.subscribe(params => {                  
          //  update case
          if(typeof params['id'] !== "undefined") {       
            let id = Number.parseInt(params['id']);
            this.userService.getUser("http://localhost/webapi/api.php/users/"+id+"?transform=1")
                .subscribe(
                  response  => {
                    this.user = response; 
                    console.log(this.user); 
                  },
                    error => {
                      this._errorMessage = error.data.message;
                    }
                );
          }
      });
  }
  

شرح الدالة

اول شيء يجب أن ندكر به هو ان المكون Edit كما  عرفناه بملف المسارات يستقبل متغير الـ id  ومن أجل التقاط هدا الـ id قمنا باستخدام ملف خدمة مسؤول عن دلك اسمه Activateroute

وهدا ال object هو المسؤول عن المسارات والباراميتر الخاص به  

ثم بعد دلك قمنا بمنادات دالة getUser  لجلب البيانات ....

ملاحظة : بامكانك الاستغناء عن دالة getUser واستخدام getUsers فهده الدالة أيضا بامكانها جلب بيانات المستخدم  ايضا بتمرير المسار الجديد ..ولكن قمت بعملية الفصل للدالتين من أجل  المزيد من الفهم والاستضاح ..

وسوف يصبح  محتوى المكون بالكامل بهدا الشكل

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms'; 
import { UserService } from '../../services/user.service'; 
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {

  public  title = 'Update User';

  public _updateForm:FormGroup;
  public _submitted:boolean = false;
  public user:any;
  public _errorMessage:any;
  
  constructor(
      public _formBuilder:FormBuilder,
      public userService:UserService,   
      protected activatedRoute:ActivatedRoute,
    ) {
     this.createForm();
  }


  ngOnInit() { 
      this.activatedRoute.params.subscribe(params => {                  
          //  update case
          if(typeof params['id'] !== "undefined") {       
            let id = Number.parseInt(params['id']);
            this.userService.getUser("http://localhost/webapi/api.php/users/"+id+"?transform=1")
                .subscribe(
                  response  => {
                    this.user = response; 
                    console.log(this.user); 
                  },
                    error => {
                      this._errorMessage = error.data.message;
                    }
                );
          }
      });
  }
  

 


  public createForm(){
    this._updateForm = this._formBuilder.group({
      username: ['', Validators.required],
      email: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
      password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
    });
}


}


 

ولكن مازال ينقصنا شيء مهم للغاية 

وهو كيف سنمرر بيانات المستخدم بعدما قمنا بجلبها الى الفورم ؟

الامر بسيط ..سيكون عن طريق استخدام  الـ ngModel  بداخل قيم الفورم 

      <input [(ngModel)]='user.username' class="form-control"  [formControl]="_updateForm.controls['username']">

ليصبح فورم التعديل بشكل عام بهدا الشكل

<h1>Update user Form </h1>
<form *ngIf="user" [formGroup]="_updateForm" (ngSubmit)="onSubmit(_updateForm.value)">
 
    <div class="form-group">
      <label>Username</label>
      <input [(ngModel)]='user.username' class="form-control"  [formControl]="_updateForm.controls['username']">
     </div>

     <div class="form-group">
        <label>Email</label>
        <input [(ngModel)]='user.email' class="form-control" [formControl]="_updateForm.controls['email']">
       </div>


     <div class="form-group">
            <label>Password</label>
            <input [(ngModel)]='user.password' class="form-control" type="password" placeholder="password" [formControl]="_updateForm.controls['password']" >
     </div>

     <button type="submit" [disabled]="!_updateForm.valid ">تعديل </button>
</form>

اضفنا شرط يتحقق ادا كانت بيانات المستخدم حاضرة يعرض الفورم ..حتى نتجنب اي خطأ بسبب ثقل السرفر او ماشابه دلك

*ngIf="user"

النتيجة -صورة

لم تتبقى لنا سوى خطو أخيرة وهي  انشاء الدالة submit  بال component edit التي ستقوم بتمرير البيانات الى ملف الخدمة وتطلب منه تعديلها بالسرفر عن طريق ميثود PUT المسؤول عن التعديل

onSubmit(elementValues: any) {  // +  أصف الدالة 
    let id:number = this.user.id;
    this._submitted = false;
    let url ="http://localhost/webapi/api.php/users/"+id;
    let data:any = {                  
            "username": elementValues.username,
            "password": elementValues.password,
            "email": elementValues.email,
    };

  this.userService.update(url,data)
      .subscribe(
          result => {
            this._submitted = true;
            this.user = data;
            alert('success : User Updated !');
          },
          error => {
            this._submitted = true;
            this._errorMessage = error;
          }
      );
}

أضف دالة update بملف الخدمة

public update(url:any , data:any) {  
  return this.httpClient
      .put(url , data )                            
      .pipe(
          map((response) => {
                return response;       
          })
      );
}

النتيجة

قم بعمل refresh   للصفحة وستلاحظ تغير البيانات  ..سنشرح لاحقا لمادا لم تتغير البيانات بالجدول مباشرة لحظة الـ submited  والاضطرار لتحديث الصفحة

الدروس السابقة :

1. المستوى الثاني من Angular 
2. انشاء واختيار api مع قاعدة البيانات mysql - Angular 
3. انشاء وتمهيد مشروع الدورة angular 
4. دمج bootstrap & jquery داخل مشروع angular 
5. انشاء الصفحة الرئيسية للتطبيق angular 
6. ماهو الفرق بين API و REST API وماهي وظفتهما - angular
7. عرض قائمة users وجلبها عبر API من قاعدة البيانات 
8. انشاء مستخدم جديد والتعرف على الـ CREATE في API