[morse]Angular Formgroup

使用方法

引用

import { FormGroup, FormControl, Validators } from '@angular/forms';

宣告

private empFormGroup: FormGroup;

初始設定

this.empFormGroup = new FormGroup({
  emp_sn: new FormControl(0),
  emp_no: new FormControl('', 

            [Validators.required, Validators.minLength(4), Validators.maxLength(50)]),
  emp_name: new FormControl('', Validators.required),

  emp_email: new FormControl('', [Validators.required, Validators.email])
}); 

賦值

this.empFormGroup.setValue(dataRow)

表單元素需全部匹配

語法:

setValue(value: { [key: string]: any; }, options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void

或

this.empFormGroup.pathValue(dataRow)

表單元素不需全部匹配

語法:

patchValue(value: { [key: string]: any; }, options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void

驗證回傳

this.empFormGroup.invalid

表示填寫有問題




Form control disable

      this.sysuserFG.patchValue(this.dataRow.sysuser);
      this.sysuserFG.get('usr_no').disable();

因為 disable 的 Form-control 會在資料送出至 Server 端時被省略, 當您設定為 disable 的 Form-control 是要在 Server 端被使用時您必須要在送出儲存前使用

      this.sysuserFG.get('usr_no').enable();

改成 enable 再送出 Server 端才會接收到資料






Form Array

宣告 Form Group, 內有 Form Array 的元素(itemRow)

  public  itemFG: FormGroup = new FormGroup({
    selectedAll: new FormControl(false),
    itemRow: this._fb.array([])
  });

引用 Form Builder , 並叫用初始化函數

  constructor(
    private _fb: FormBuilder
  ) { }

 ngOnInit() {
    this.addItem();
  }

實作建立 Form Array 內容的函數

  addItem() {
    (this.itemFG.get('itemRows') as FormArray).clear();

    this._arscal.getArsCalSelectedDtAsync(this.arsFG.get('ars_sn').value).subscribe(
      holidayRows =>{
        this.itemList = holidayRows;
        if (holidayRows){
          holidayRows.map(
            holidayRow => {
              const row = this._fb.group({
                cal_selected: this.isSelected(holidayRow.id_sn),
                ars_sn: holidayRow.ars_sn,
                id_name: holidayRow.id_name,
                acl_isholiday: (holidayRow.acl_isholiday == null) ? 

                   true : holidayRow.acl_isholiday
              });
              (this.itemFG.get('itemRows') as FormArray).push(row);
            }
          );
        }
      }
    );
  }

  isSelected(idSn: number): boolean {
    const tbArsCal = this.arsFG.get('tb_ars_cal').value as tb_ars_cal[];
    return tbArsCal.some(d => d.id_sn === idSn);
  }

  selectAll() {
    const fgArray = this.itemFG.get('itemRows') as FormArray;
    for (let i = 0; i < fgArray.length; i++) {
      fgArray.get('' + i).get('cal_selected').setValue(this.itemFG.get('selectedAll').value);
    }
  }

  checkAllSelected() {
    let ret = true;
    const fgArray = this.itemFG.get('itemRows') as FormArray;
    for (let i = 0; i < fgArray.length; i++) {
      if (!fgArray.get('' + i).get('cal_selected').value) {
        ret = false;
        break;
      }
    }
    this.itemFG.get('selectedAll').setValue(ret);
  }

   btn_save_edit_click() {
    const dtRows = this.itemList;
    const fgArray = this.itemFG.get('itemRows') as FormArray;
    let choiceitemRowsAry: tb_ars_cal[] = [];
    for (let i = 0; i < fgArray.length; i++) {
      if (fgArray.controls[i].get('cal_selected').value) {
        dtRows[i].cal_selected = true;
        dtRows[i].acl_isholiday = fgArray.controls[i].get('acl_isholiday').value;
        choiceitemRowsAry.push(dtRows[i]);
      }
    }
    this.dialogRef.close(choiceitemRowsAry);
  }

HTML

<div [formGroup]="itemFG" autocomplete="off" class="edit-form width-100-pa margin-10-px">
    <div mat-dialog-title>
        <div class="row">
            <div class="col-10">
                <h2>
                    休假日選擇
                </h2>
            </div>
            <div class="col-2 align-right">
                <span class="mouse_pointer" (click)="closeDialog()">
                    <mat-icon>clear</mat-icon>
                </span>
            </div>
        </div>
    </div>
    <mat-dialog-content>
        <div class="align-right">
            <mat-checkbox formControlName="selectedAll" (change)="selectAll()">全選</mat-checkbox>
        </div>
        <div>
                <!-- {{ itemFG.get('selectedAll').value | json }} -->
                <!-- {{ itemFG.get('selectedAll').value | json }} -->
        </div>
        <div formArrayName="itemRow"
            *ngFor="let f of itemFG.get('itemRow')['controls']; 

                 let i=index; let evenRecord=even; let oddRecord=odd">
            <div [ngClass]="{'bg1': evenRecord, 'bg2': oddRecord}">
                <div [formGroupName]="i" style="border: 1px solid #dddd; 

                    vertical-align: middle; padding: 6px;">
                    <mat-checkbox formControlName="cal_selected" 

                       (change)="checkAllSelected()">
                        <span style="width: 280px;">{{ f.get('id_name').value }}</span>
                    </mat-checkbox>
                    <span style="font-size: 0.8em;">
                        <mat-radio-group formControlName="acl_isholiday" 

                           *ngIf="f.get('cal_selected').value" >
                            <mat-radio-button [value]="true">休假日</mat-radio-button>
                            <mat-radio-button [value]="false">出勤日</mat-radio-button>
                        </mat-radio-group>
                    </span>
                    <span style="color: red;"
                        *ngIf="f.get('cal_selected').value 

                               && f.get('acl_isholiday').value">

                        (休假日)</span>
                </div>
            </div>
        </div>
    </mat-dialog-content>
    <!-- Action -->
    <mat-dialog-actions>
        <div class="width-100-pa align-right">
            <button type="button" class="btn button-margin3"
                (click)="btn_cancel_edit_click()">{{"button.取消" | translate}}
            </button>
            <button type="button" class="btn btn-primary button-margin3" (click)="btn_save_edit_click()"
                [disabled]="false">{{"button.確定" | translate}}
            </button>
        </div>
    </mat-dialog-actions>
</div>