מדריך אנגולר | reactive forms – חיבור הטופס הריאקטיבי לתצוגת הטופס

<form *ngIf="jobRegistrationForm" [formGroup]="jobRegistrationForm" (submit)="submit(jobRegistrationForm)">
    <div class="form-group">
        <label>שם מלא<span class="red-star">*</span></label>
        <input  formControlName="fullName" type="text" value="" placeholder="הקלדו כאן" />
    </div>
    <div class="form-group">
        <label>מספר טלפון<span class="red-star">*</span></label>
        <div [formGroup]="jobRegistrationForm.get('phoneForm')" class="inner-group-phone">
            <input formControlName="number" type="text" value="" placeholder="הקלדו כאן" />
            <div class="prefix-container">
                <button (click)="displayPrefixlist()" type="button" class="choose-prefix"></button>
                <ul *ngIf="showPrefix" class="prefix-list">
                    <li *ngFor="let prefix of prefixList">
                        <button (click)="choosenPrefix(prefix)" type="button" class="prefix">{{prefix}}</button>
                    </li>
                </ul>
                <input type="text" formControlName="prefix" [attr.disabled]="true" value="" placeholder="000" />
            </div>
        </div>
    </div>
    <div class="form-group">
        <label>אימייל<span class="red-star">*</span></label>
        <div [formGroup]="jobRegistrationForm.get('emailForm')"  class="inner-group-email">
        <input  formControlName="email" type="email" value=""  placeholder="אימייל לראשונה"/>
        <input formControlName="reEmail" type="email" value="" placeholder="אימייל בשנית" />
        </div>
    </div>
    <div class="form-group">
        <label>סטטוס<span class="red-star">*</span></label>
       <div (change)="checkJobStatus()" class="radio-group">
           <input type="radio" name="jobStatus" formControlName="jobStatus" [value]="true" />
           <span class="radio-input-text">עובד</span></div>
       <div (change)="checkJobStatus()" class="radio-group">
           <input type="radio" name="jobStatus" formControlName="jobStatus" [value]="false" />
           <span class="radio-input-text">לא עובד</span></div>

    </div>
    <div *ngIf="dontHaveJobYet" class="form-group">
        <label>מאיזה יום הפסקת לעבוד<span class="red-star">*</span></label>
        <input formControlName="lastDayJob" type="date" >
    </div>
    <div class="form-group">
        <input type="checkbox" formControlName="termsApproved" /> 
        <span>יש לאשר את תנאי השימוש<span class="red-star">*</span></span>
    </div>
    <button class="button-action">אני רוצה!</button>
</form>

<form *ngIf="jobRegistrationForm"
      [formGroup]="jobRegistrationForm"
      (submit)="submit(jobRegistrationForm)">

<div class="form-group">
        <label>שם מלא<span class="red-star">*</span></label>
        <input  formControlName="fullName" type="text" value="" placeholder="הקלדו כאן" />
    </div>

this.jobRegistrationForm = this.fb.group({
      fullName: this.fb.control(''),

    <div class="form-group">
        <label>אימייל<span class="red-star">*</span></label>
        <div [formGroup]="jobRegistrationForm.get('emailForm')"  class="inner-group-email">
        <input  formControlName="email" type="email" value=""  placeholder="אימייל לראשונה"/>
        <input formControlName="reEmail" type="email" value="" placeholder="אימייל בשנית" />
        </div>
    </div>

 emailForm : this.fb.group({
        email: [''],
        reEmail: ['']
      }),