Skip to content

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

@ViswanathYerramsetty

Description

@ViswanathYerramsetty

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions