Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#545 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 3 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
42/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
angular, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu từ đường dẫn xác thực required của component sam-checkbox và so sánh với hành vi của sam-text và sam-radio được mô tả trong issue. Tái hiện thao tác điều hướng với một lựa chọn nhiều checkbox đang để trống, sau đó xác minh rằng lỗi required xuất hiện mà không cần chọn rồi bỏ chọn một checkbox trước.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
8
Fork
33
Merge trung bình
3 ngày 21 giờ
Pull request đã merge (30 ngày)
9

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của GSA/sam-ui-elements

Tất cả issue của GSA/sam-ui-elements

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.