亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

MatStepper 如何觸發步驟的錯誤狀態?

MatStepper 如何觸發步驟的錯誤狀態?

慕少森 2021-09-30 15:18:48
我正在我的mat-horizontal-stepper一個組件中實現 a并且我試圖讓錯誤狀態顯示在一個步驟上,如果我在[completed]屬性存在時從它移開,但這并false沒有發生。我不確定使用該completed物業或類似的東西是否有一些限制;這是我到目前為止:組件的 HTML<mat-horizontal-stepper linear #auditStepper>     <mat-step label="Choose a Company" [completed]="selectionClient.selected.length > 0">     </mat-step>     <mat-step label="Select a PPC Account" errorMessage="Select an Account" [completed]="selectionPPC.selected.length > 0">     </mat-step>     <mat-step label="Set Your Targets">       </mat-step></mat-horizontal-stepper>組件的 TS@Component({  selector: 'app-new-audit',  templateUrl: './new-audit.component.html',  styleUrls: ['./new-audit.component.scss'],  providers: [    {      provide:  STEPPER_GLOBAL_OPTIONS,      useValue: { showError: true }    }  ]})在上面的代碼中,我只提供了重要的東西;但是如果我正確地遵循了 Angular Material 文檔,我需要做的是將它添加providers到組件(或我的主應用程序模塊)中,僅此而已?因此,例如,如果我進入第 2 步但保持completed條件為假,然后移至另一個步驟,則應觸發錯誤,因為該步驟不再處于活動狀態但也未完成。我只是想了解一切是如何工作的,因為我沒有為這個步進器使用反應形式或任何形式,因為我正在使用 MatTable;我只需要用戶從表中選擇一行(通過 MatTable 的選擇功能),如果選擇數組有一個元素,那么我可以將該步驟視為“完成”并允許移動到下一步。Stackblitz 演示 https://stackblitz.com/edit/angular-khyu8u編輯:如果我使用 aFormGroup和[stepControl]該步驟的屬性,錯誤狀態工作得非常好,但我需要它而不需要表單。
查看完整描述

1 回答

?
慕后森

TA貢獻1802條經驗 獲得超5個贊

有一種專用方法描述了顯示錯誤所需的條件:


private _getDefaultIndicatorLogic(step: CdkStep, isCurrentStep: boolean): StepState {

  if (step._showError && step.hasError && !isCurrentStep) {

    return STEP_STATE.ERROR;

  }

step._showError來自STEPPER_GLOBAL_OPTIONS您在提供者中定義的

step.hasError 包括最有趣的部分

以下是所有定義:


@Input()

get hasError(): boolean {

  return this._customError == null ? this._getDefaultError() : this._customError;

}


set hasError(value: boolean) {

  this._customError = coerceBooleanProperty(value);

}


private _getDefaultError() {

  return this.stepControl && this.stepControl.invalid && this.interacted;

}

如您所見,true如果出現hasError 返回


1)我們有stepControl無效狀態和當前步驟交互


2)我們傳遞hasError返回true的輸入道具


!isCurrentStep 意味著只有在您執行其他步驟時才會顯示錯誤

因此,您可以hasError使用自定義邏輯將屬性傳遞給步驟,例如:


<mat-step ... #step [hasError]="step.interacted" 


查看完整回答
反對 回復 2021-09-30
  • 1 回答
  • 0 關注
  • 204 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號