Form builder

בלי Form builder, לכל שדה שאנחנו מגדירים צריכים להשתמש במילה new.

comp.ts

contactForm: FormGroup = new FormGroup({
    presonalDetails: new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      email: new FormControl(''),
    }),
    message: new FormControl(''),
    subjects: new FormArray([
      new FormControl(null),
    ])
});

עם Form builder ההגדרה של הטופס נקייה יותר.

comp.ts

constructor(private formBuilder: FormBuilder){}

public contactForm: FormGroup = new FormGroup({});

ngOnInit() {
    this.contactForm = this.formBuilder.group({
      presonalDetails: this.formBuilder.group({
        firstName: ['', Validators.required],
        lastName: '',
        email: '',
      }),
      message: ''
    });
}

כדי להשתמש ב-Form builder צריך לייבוא לתוך ה-app.module את הספרייה:

comp.ts

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

ולהוסיף אותה ל-import.

שדה select

כדי להוסיף שדה sekect עם ערכים בתוכו נגדיר את השדה בטופס שלנו:

comp.ts

constructor(private formBuilder: FormBuilder){}

public contactForm: FormGroup = new FormGroup({});

ngOnInit() {
    this.contactForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      country: ['', [Validators.required]],
    });
}

get firstname() {
    return this.contactForm.get('firstname');
}

get country() {
  return this.contactForm.get('country');
}

countryList: country[] = [
  new country("1", "India"),
  new country('2', 'USA'),
  new country('3', 'England')
];

export class country {
  id: string;
  name: string;
 
  constructor(id: string, name: string) {
    this.id = id;
    this.name = name;
  }
}

בטופס עצמו:

comp.html

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate>
 
  <p>
    <label for="firstname">First Name </label>
    <input type="text" id="firstname" name="firstname" formControlName="firstname">
  </p>

  <div
    *ngIf="!firstname?.valid && (firstname?.dirty ||firstname?.touched)">
    <div [hidden]="!firstname.errors.required">
      First Name is required
    </div>
  </div>

  <p>
    <label for="country">country </label>
    <select id="country" name="country" formControlName="country">
      <option [ngValue]="c.id" *ngFor="let c of countryList">
        {{c.name}}
      </option>
    </select>
  </p>

  <div *ngIf="!country.valid && (country.dirty || country.touched)">
    <div [hidden]="!country.errors.required">
      country is required
    </div>
  </div>

  <p>
    <button type="submit" [disabled]="!contactForm.valid">Submit</button>
  </p>
 
</form>

לבדיקת הסטטוס של הטופס אפשר לשים את הקוד הבא אחרי הטופס ב-html:

comp.html

<div style="float: right; width:50%;">
 
  <h3>Form Status</h3>
  <b>valid : </b>{{contactForm.valid}}
  <b>invalid : </b>{{contactForm.invalid}}
  <b>touched : </b>{{contactForm.touched}}
  <b>untouched : </b>{{contactForm.untouched}}
  <b>pristine : </b>{{contactForm.pristine}}
  <b>dirty : </b>{{contactForm.dirty}}
  <b>disabled : </b>{{contactForm.disabled}}
  <b>enabled : </b>{{contactForm.enabled}}
 
  <h3>Form Value</h3>
  {{contactForm.value |json}}
 
</div>