Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to implement form validation in a custom dialog #482

Open
enqbator opened this issue Dec 6, 2022 · 0 comments
Open

How to implement form validation in a custom dialog #482

enqbator opened this issue Dec 6, 2022 · 0 comments

Comments

@enqbator
Copy link

enqbator commented Dec 6, 2022

I have a custom dialog where I need to validate the contents and have the dialog close if everything is valid and stay open with validation if everything is not. It does not appear that there is a way to do this, and the documentation is extremely vague on about everything beyond the cherry-picked examples included in the base project. Am I missing something?

this.selectorService.openDialog({
  commands: [{
      name: "save",
      category: BUTTON_PRIMARY_CATEGORY,
      title: "Save",
      ordinal: 0,
      token: {
          type: OccurrenceDialogSaveCommand,
          properties: {
              component: this,
              model: dialogItem,
              outputData: formOutput
          }             
      }
  }, {
      name: "cancel",
      category: BUTTON_CANCEL_CATEGORY,
      title: "Cancel",
      ordinal: 1
  }],
  componentData: {
      type: OccurrenceFormComponent,
      properties: {
          occurrence: dialogItem,
          outputData: formOutput
      }             
          }
      }).subscribe(x => {
          console.log(x);
          console.log(dialogItem);
      });
@Injectable()
export class OccurrenceDialogSaveCommand implements Command {
    execute(context: ExecutionContext): Observable<any> {
        var s = new Subject();
        console.log(context);
        s.next(true);        
        return s;
    }
}
<div class="occurrence-form">
    <h1>Occurrence Form</h1>
    <form class="sf-form -condensed" #myForm>
        <sf-field-wrapper [isRequired]="true" [showErrors]="true">
            <sf-input label="Date" type="date" [(ngModel)]="occurrence.InstanceDate"
                inputmode="date" name="date" required #date="ngModel"></sf-input>
                <div *ngIf="date.errors?.required" class="sf-input__required">
                    Date is required!
                </div>
        </sf-field-wrapper>
        <div class="sf-row">
            <div class="sf-row__col">
                <sf-field-wrapper [isRequired]="true" [showErrors]="true">
                    <sf-input label="Start Time" type="time" [(ngModel)]="occurrence.StartTime"
                        name="startTime" #startTime="ngModel" required></sf-input>
                </sf-field-wrapper>
                <div *ngIf="startTime.errors?.required" class="sf-input__required">
                    Start time is required!
                </div>
            </div>
            <div class="sf-row__col">
                <sf-field-wrapper [isRequired]="true" [showErrors]="true">
                    <sf-input label="End Time" type="time" [(ngModel)]="occurrence.EndTime" 
                        name="endTime" #endTime="ngModel" required></sf-input>
                </sf-field-wrapper>
                <div *ngIf="endTime.errors?.required" class="sf-input__required">
                    End time is required!
                </div>
            </div>
        </div>
    </form>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant