شرح الفورم Forms في angular

افتح ملف  src/app/app.module.ts   وأضف موديل  مدير الفورم 

import { ReactiveFormsModule } from '@angular/forms';

imports: [
   //   
   ReactiveFormsModule,
   // 
],

افتح src/app/app.component.ts   

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms'; // + اضف

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  public  title = 'Angular form';

  public _loginForm:FormGroup;
  public _submitted:boolean = false;

   

  constructor(
    public _formBuilder:FormBuilder,
) {
      this._loginForm = this._formBuilder.group({
        username: ['', Validators.required],
        password: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
      });
  }
  

  onSubmit(elementValues: any) {
    this._submitted = true;
    alert('nice');
    }

}

افتح  ملف src/app/app.component.html    

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


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

     <button type="submit" [disabled]="!_loginForm.valid ">الدخول</button>
</form>

التعليمة (ngSubmit)="onSubmit(_loginForm.value)" يقصد بها ربط الفورم بالدالة onSubmit  ونمرر بداخل هذه الدالة  كائن  ذو اسم _loginForm من نوع FormGroup  الذي يحتوي على قيم الفورم  username + password  ..

اضافة ال FormBuilder  الفورم بيلدر يساعدك بإنشاء وادارة قيم الفورم  (firstname & lastname..) .يمكن ان نسميه مدير أو مراقب القيم

نضيف الفورم بيلدر لتمهيد قيم الفورم الخاص بينا بهذا الشكل

نضيف دالة إنشاء وتمهيد قيم الفورم بالمكون 

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

يقصد بالتعليمة الأولى أعلاه  هو أن هذه القيمة لايمكن ان تبقى فارغة وإنما يجب ملأها  

username: ['', Validators.required],//يقصد بهدا الأمر هو أن هده القيمة لايمكن ان تبقى فارغة يجب ملأها

اما القيمة الثانية تعني أن القيمة يجب أن لا تكون فارغة + يجب أن  يتجاوز عدد الأحرف أربعة احرف

password: ['', Validators.compose([Validators.required, Validators.minLength(4)])],

 نقوم بمناداة الدالة  بال constarctor

  constructor(public _formBuilder:FormBuilder,) {
     this.createForm();
  }

احفظ الكل وجرب املأ الفورم ..ستلاحظ ان الزر send  غير قابل للضغط حتى تملأ كافة البيانات حسب القوانين التي قمنا بإنشائها  .. بعد ملأ البيانات يصير الزر قابل للضغط فتقوم بالضغط على زر send سيعرض لك نافذة مكتوب بداخلها nice

لاحظ ماهو مكتوب في ملف template  بالزر send

[disabled]="!_loginForm.valid"

من أجل عرض قيم الفورم المرسلة إلى الدالة  نقوم بالتالي .

  onSubmit(elementValues: any) {
    alert('Username is : '+elementValues.username +' - Password is : '+elementValues.password );
   }

بعد ذلك يمكن ان نقوم بإرسال هذه القيم الى السيرفر لكي يتحقق منها عبر قنوات services