# 前端
:::danger
常用語法
:::

//html
(afterViewInit)="formManagementAfterViewInit()"
[disabled]="true"
(focus)="Check_ACNOCD()"
(systexBeforeBlur)="Validate_SVTYPE()"
[alwaysRunBeforeBlurFunc]="true"

//ts
ECommon.SystexAlert(this.form, '「具有稅籍的居住國家或地區」請放置正確');
disabledDefaultTransactionCompletedEvent: true;
this.form.formControl(Ids.GURTYPE).setValue('');
this.form.setProperty(Ids.LONID, 'disabled', true);
import { ECommon } from '@systex/platform/core'
ECommon.setfocusto(this.form,'id')

:::warning
單畫面
:::

//單畫面start
//html
(dataChange)="onFormDataChange($event.detail)"

//ts
AfterViewInit{
  private _form: FormGroup;
  private _formData: H37443I1;
  screenID: string;
  disabledResult = true;
  @ViewChild('form', { static: true }) formElementRef: ElementRef;
  get form() {
    return this.formElementRef.nativeElement as SystexFormManagementElement;
  }
  
ngOnInit() {
    this.screenID = `${this.transaction}I1`;
  }
ngAfterViewInit() {
    this.updateContainerConfig({
      buttonConfigs: [
        {
          id: 'confirm',
          clickListener: () => {
            if (this.disabledResult === true) {
              if (this.button1_onclick()) {
                this.transactionCompleted.emit({
                  data: new H37443I1Tita(this._formData),
                  titaHeaderPatch: {
                    TxnCode: 'H37443',
                    MsgID: `H37443I1ViewModel`
                  }
                });
              }
            } else {
              this.callQueryH87163();
            }
          }
        }
      ]
    });
  }
  
  onFormDataChange(change: any) {
    setTimeout(() => {
      if (!this._form && change.formGroup) {
        this._form = change.formGroup;
      }
      this._formData = { ...change.formGroup.value };
    }, 0);
  }
  callQueryH87163() {
    const LONID = this.form.formControl(Ids.LONID).value;
    const LONNO = this.form.formControl(Ids.LONNO).value;
    const APPDAY = this.form.formControl(Ids.CONSAPDATE).value;
    this.getcallQueryData(LONID, LONNO, APPDAY).subscribe(response => {
      const data = response.TotaBody[0];
      this.form.formControl(Ids.MAXFANCODE).setValue(data[Ids.MAXFANCODE]);
      this.form.formControl(Ids.GURTYPE).setValue(data[Ids.GURTYPE]);
      this.SCR_After2();
      this.disabledResult = true;
    });
  }
  private getcallQueryData(LONID: string, LONNO: string, APPDAY: string) {
    return this.submitCallQuery(
      {
        CallQueryTxnCode: 'H87163',
        MsgID: 'H87163I1ViewModel'
      },
      {
        LONID: LONID,
        LONNO: LONNO,
        APPDAY: APPDAY
      }
    );
  }

:::warning
多畫面
:::

//父層

//子層
//html
(afterViewInit)="formMangementAfterViewInit()"





//子層callquery start
//子
@Input() submitCallQuery: (
    titaHeaderPatch: CallQueryTitaHeader,
    titaBody: any,
    config?: {
      focusId?: string;
      focusIdWhenError?: string;
      disabledFocus?: boolean;
      requiredCheck?: string[];
    }
  ) => Observable<ApiResponse<any>>;
  
//父html
[submitCallQuery]="submitCallQuery"

//子層callquery end

:::info
直接給Tita值
:::

:::info
身分證要加Edite Mask = A6
:::
:::info
setProperty
:::
:::info
限制輸入
:::

Process_TXNCDE(event: any) {
    if (event.keyCode < 49 || event.keyCode > 55) {
      event.preventDefault();
      this.form.element<SystexInputElement>(`${event.srcElement}`).setFocus();
      event.keyCode = 0;
    }
  }

//HN7612

:::info
grid_focus_to_first_option
:::
//H37444

 [focusEleId]="'SELITEM'"
 [id]="'SELITEM'"

:::info
grid tab
:::
GRID 畫面 選好資料 按TAB到確定按鈕
把 systex-grid 標籤 加上順序[systexTabIndex]=""
讓它成為最後一個順序
假如有個標籤 [systexTabIndex]="02" 是最後了
就給grid標籤 [systexTabIndex]="03'
有需要這樣的才做，有些GRID不需要 自行判斷
:::info
onfocus
:::
當要用onfocus時，請打(focus)

:::info
callquery完會focus在下一個表格，可以調設定
:::

:::info
grid內需要資料編審的這樣寫
:::

::: info
父層用子層Function
:::

import { TransactionsJ326i1i1Component } from './transactions-j326i1i1/transactions-j326i1i1.component';


@ViewChild(TransactionsJ326i1i1Component, { static: false })
  child: TransactionsJ326i1i1Component;
  
  
  
  if (this.child.button1_onclick()) {
          const OPTION_X = this.form1.OPTION_X;
          console.log('OPTION_X', OPTION_X);
          const CONFMK = this._formData.CONFM
          ..
          ...
          ....
          

:::info
callquery 解除預設focus
:::

private getcallQueryData(LONNO: string) {
    return this.submitCallQuery(
      {
        CallQueryTxnCode: 'H87101',
        MsgID: 'H87101I1ViewModel'
      },
      {
        LONNO: LONNO
      },{
        disabledFocus:true
      }
    );
  }