Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

sam-checkbox (multi) is not showing the required error message.

オープン
#545 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 3 日以内に返信

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
42/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
angular, typescript
領域
frontend

調査の方向性

sam-checkbox コンポーネントの required バリデーションの経路から始め、issue で説明されている sam-text と sam-radio の動作と比較します。複数の checkbox が空の状態でナビゲーションを再現し、最初に checkbox を選択して選択解除しなくても required エラーが表示されることを確認します。

索引モデルが issue の本文から書いたものです。

説明

sam-checkbox (multi) is not showing the required error message when we are going to next page.

if I add the same backend config for sam-text or sam-radio, they are showing the required error message.

if we click on the checkbox and uncheck the checkbox, then only it is showing the error message.

<div class="sam-ui segment" [hidden]="!checkFieldDisplayOption('FAR_CASES')" *ngIf="shouldShowFarCases()">
    <sam-checkbox
      [attr.id]="farCasesConfig.id"
      [(model)]="farCasesTypesModel"
      [name]="farCasesConfig.name"
      [options]="farCasesConfig.options"
      [label]="farCasesConfig.label"
      [hint]="farCasesConfig.hint"
      [control]="generalInfoForm.controls['farCasesTypes']"
      [formControl]="generalInfoForm.controls['farCasesTypes']"
      [required]="true">
    </sam-checkbox>
</div>


  farCasesTypesModel = [];
  public readonly farCasesConfig = {
    id: OpportunityFieldNames.FAR_CASES,
    label: 'Requirements Strategy',
    name: OpportunityFieldNames.FAR_CASES + '-checkbox',
    required: false,
    hasSelectAll: false,
    hint: 'Select at least one checkbox in this section',
    errorMessage: undefined,
    options: [
      {value: 'FAR 7.107-2', label: 'FAR.&.7.107-2 - Intent to consolidate requirements Determination that consolidation is necessary and justified with the publication of the solicitation in Description.', name: 'checkbox-far-7.107.2'},
      {value: 'FAR 7.107-3', label: 'FAR.&.7.107-3 - Intent to bundle requirements Determination that bundling is necessary and justified with the publication of the solicitation in Description.', name: 'checkbox-far-7.107.3'},
      {value: 'FAR 7.107-4', label: 'FAR.&.7.107-4 - Intent to substantially bundle requirements Include the rationale for substantial bundling as part of the determination for bundling with the publication of the solicitation', name: 'checkbox-far-7.107.4'},    
    ]
  };
  
  constructor(private errorService: OpportunityFormErrorService,
              private cdr: ChangeDetectorRef,
              private formBuilder: FormBuilder,
              private oppFormService: OpportunityFormService,
              private noticeTypeMapService: OppNoticeTypeMapService,
              private timezoneService: OpportunityTimezoneService,
              private oppAutoFillService: OppRelatedNoticeAutoFillService,
              private dictionaryService: DictionaryService) {
    Object.freeze(this.archiveDateConfig);
    Object.freeze(this.vendorsCDIvlConfig);
    Object.freeze(this.vendorsVIvlConfig);
    Object.freeze(this.authorityConfig);
    Object.freeze(this.addiReportingConfig);
    Object.freeze(this.farCasesConfig);
  }
  
ngOnInit() {
    this.loadFarCases();
  }


createForm() {
    this.generalInfoForm = this.formBuilder.group({
      farCasesTypes: null
    });
    this.cdr.detectChanges();
    if (this.viewModel.getSectionStatus(OpportunitySectionNames.GENERAL) === 'updated') {
      this.generalInfoForm.get('farCasesTypes').markAsDirty({onlySelf: true});
      this.generalInfoForm.get('farCasesTypes').updateValueAndValidity();
    }
  }
  
loadFarCases() {
    console.log('loading far cases ' + this.oppGeneralInfoViewModel.farCasesTypes + ',' + this.farCasesTypesModel);
      if ( this.oppGeneralInfoViewModel.farCasesTypes ) {
        this.farCasesTypesModel = this.oppGeneralInfoViewModel.farCasesTypes;
      }
  }

updateForm() {
    this.generalInfoForm.patchValue({
      farCasesTypes: this.farCasesTypesModel
    }, {
      emitEvent: false
    });
    console.log('patching ' + this.farCasesTypesModel + ',' + this.addiReportingTypes);
    this.cdr.detectChanges();
    this.updateErrors();
  }

subscribeToChanges() {
    this.linkControlTo(this.generalInfoForm.get('farCasesTypes'), this.saveFarCasesTypes);
  }

private saveFarCasesTypes(farCases) {
    console.log('saving farcases ' + farCases);
    this.oppGeneralInfoViewModel.farCasesTypes = farCases;
    this.cdr.detectChanges();
    this.updateFarCasesError();
  }

public updateErrors() {
    console.log('updating errors ' + this.farCasesTypesModel + ',' + this.addiReportingTypes);
    this.updateFarCasesError();
    this.cdr.detectChanges();
  }
  
private updateFarCasesError() {
    console.log('updating far cases error ' + this.errorService.validateFarCases().errors?.id);
    this.generalInfoForm.get('farCasesTypes').clearValidators();
    this.generalInfoForm.get('farCasesTypes').setValidators((control) => {
      return control.errors
    });
    this.generalInfoForm.get('farCasesTypes').setErrors(this.errorService.validateFarCases().errors);
    this.markAndUpdateFieldStat('farCasesTypes');
    this.emitErrorEvent();
  }
  
shouldShowFarCases() {
    return ( environment.SHOW_REQUIREMENTS_STRATEGY === 'true' && this.viewModel.oppHeaderInfoViewModel.opportunityType === 'i' );
  }
  
error-service
public validateFarCases(): OppFieldError {
    let fieldErrors = {
      id: OpportunityFieldNames.FAR_CASES,
      errors: null,
    };

  
    if (this._viewModel.data.type && this._viewModel.data.type === 'i') {
      if (!this._viewModel.oppGeneralInfoViewModel.farCasesTypes || !this._viewModel.oppGeneralInfoViewModel.farCasesTypes.length) {
        fieldErrors.errors = this.validateRequired('Requirements Strategy', this._viewModel.oppGeneralInfoViewModel.farCasesTypes);
      }
    }

    let sectionErrors = OpportunityFormErrorService.findErrorById(this._errors, OpportunitySectionNames.GENERAL) as OppFieldErrorList;
    this.setOrUpdateError(sectionErrors, fieldErrors);
    console.log('fieldErrors ' + fieldErrors.id + ',' + fieldErrors?.errors?.requiredField?.message);
    return fieldErrors;
  }
  

text-radio-showing-the-error1

主要言語
TypeScript
スター
8
フォーク
33
平均マージ
3日 21時間
マージ済み PR(30日)
9

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

GSA/sam-ui-elements のほかの issue

GSA/sam-ui-elements の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。