欄位初階實作

Design Component

設計模式外掛欄位，當設計表單時從欄位列表拖曳進入表單畫布上顯示的樣式，需繼承BpmFwDesignComponent，使用exProps接收傳入 component 的屬性值，可自行定義外掛欄位接收的屬性類型 model，例如：HelloExProps只定義了一個isShowHelloWorld屬性。

hello-world.design.component.ts

@Component({
  selector: "uofx-hello-world-design-component",
  templateUrl: "./hello-world.design.component.html",
  styleUrls: ["./hello-world.design.component.scss"],
})
export class HelloWorldDesignComponent extends BpmFwDesignComponent {
  @Input() exProps: HelloExProps;
}

hello.exprops-type.ts

export interface HelloExProps {
  isShowHelloWorld: boolean;
}

Props Component

屬性設定模式的外掛欄位，透過這個外掛欄位可以自行定義表單使用上的屬性，例如單選鈕和下拉項目的選項值內容，需繼承BpmFwPropsComponent。

hello-world.props.component.ts

@Component({
  selector: "uofx-hello-world-props-component",
  templateUrl: "./hello-world.props.component.html",
})
export class HelloWorldPropsComponent
  extends BpmFwPropsComponent
  implements OnInit
{
  form: FormGroup;
  @Input() exProps: HelloExProps;

  isShowHelloWorld: boolean;
  constructor(public fb: FormBuilder) {
    super(fb);
  }

  ngOnInit(): void {
    this.initExProps();
  }

  initExProps() {
    if (!this.exProps) {
      // 初始化設定額外屬性
      this.exProps = {
        isShowHelloWorld: false,
      };
    } else {
      // 若已有存在的 exProps
      // 看是需要更新還是重設 value
    }
  }
}

Write Component

填寫模式的外掛欄位畫面 html 設定的部分,外層須有一個FormGroup，裡面在放上自己的FormControl欄位且可設定欄位的 validator。

• 使用uofx-form-field-name元件可與 UOF X 標題樣式一致，name與required變數薇BpmFwWriteComponent本身提供之變數。
• 使用fw-control class 可以使框內內容撐開的空間與 UOF X 樣式一致。
• 使用fw-descr class 可與 UOF X 標準欄位內的小字說明樣式一致。

fw-control與fw-descr樣式可參閱 可用 CSS Class>欄位樣式。

hello-world.write.component.html

<div>
  <uofx-form-field-name [name]="name" [required]="required">
  </uofx-form-field-name>
</div>
<div class="fw-control">
  <table [formGroup]="form">
    <tr>
      <!-- hello world 顯示歡迎訊息 -->
      <th colspan="3">
        <span *ngIf="exProps?.isShowHelloWorld ? true: false">hello 外掛欄位 write mode</span>
      </th>
    </tr>
    <tr>
      <td colspan="3">
        <ng-container *ngIf="editable; else elseTemplate5">
          <input pInputText formControlName="message" />
          <uofx-form-error-tip [control]="form?.controls.message">
          </uofx-form-error-tip>
        </ng-container>
        <ng-template #elseTemplate5>
          <div class="textarea-content">{{ value?.message }}</div>
        </ng-template>
      </td>
    </tr>
  </table>
  <div class="fw-descr" *ngIf="showDescr && descr">
    {{ descr }}
  </div>
</div>

填寫模式的外掛欄位需繼承BpmFwWriteComponent，透過BpmFwWriteComponent可取得表單欄位的 value。

hello-world.write.component.ts

@Component({
  selector: "uofx-hello-world-write-component",
  templateUrl: "./hello-world.write.component.html",
})
export class HelloWorldWriteComponent extends BpmFwWriteComponent implements OnInit
{
  @Input() exProps: HelloExProps;

  form: FormGroup;

  initForm() {
    this.form = this.fb.group({
      message: this.value?.message || '',
    });
  }
}

---

表單觸發儲存時，在前端驗證通過的情況下，外掛欄位可透過實作checkBeforeSubmit()再次做送出前的非同步檢查，resolve(false)表示驗證失敗，可自行設計後續的錯誤處理與顯示。

hello-world.write.component.ts

/** 表單 submit 前的檢查 */
checkBeforeSubmit(): Promise<boolean> {
  return new Promise(resolve => {
    const value = this.form.value;
    console.log(value);
    resolve(true);
  });
}