Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-30 12:11:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

revamp wifi, fix error messaging in forms

Browse Source
This commit is contained in:
Matt Hill
2021-08-17 19:01:35 -06:00
committed by Aiden McClelland
parent bcb6d9d673
commit 62b523ebde
46 changed files with 899 additions and 781 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ui/src/app/components/form-object/form-error.component.html Normal file
View File

@@ -0,0 +1,31 @@
<div [hidden]="!control.dirty && !control.touched" class="validation-error">
<!-- primitive -->
<p *ngIf="control.hasError('required')">
{{ spec.name }} is required
</p>
<!-- string -->
<p *ngIf="control.hasError('pattern')">
{{ spec['pattern-description'] }}
</p>
<!-- number -->
<ng-container *ngIf="spec.type === 'number'">
<p *ngIf="control.hasError('numberNotInteger')">
{{ spec.name }} must be an integer
</p>
<p *ngIf="control.hasError('numberNotInRange')">
Number not in range
</p>
</ng-container>
<!-- list -->
<ng-container *ngIf="spec.type === 'list'">
<p *ngIf="control.hasError('listNotInRange')">
List not in range
</p>
<p *ngIf="control.hasError('listNotUnique')">
{{ spec['pattern-description'] }}
</p>
</ng-container>
</div>

22
ui/src/app/components/form-object/form-object.component.html
View File

@@ -151,11 +151,12 @@
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-item>
<ng-container *ngFor="let validation of formService.validationMessages[entry.key + '/' + i]">
<p style="font-size: small;" *ngIf="abstractControl.hasError(validation.type) && (abstractControl.dirty || abstractControl.touched)">
<ion-text color="danger">{{ validation.message }}</ion-text>
</p>
</ng-container>
<form-error
*ngIf="abstractControl.errors"
[control]="abstractControl"
[spec]="spec.spec"
>
</form-error>
</ion-item-group>
</div>
</div>
@@ -183,11 +184,12 @@
</ion-item>
</ng-container>
</ng-container>
<div *ngFor="let validation of formService.validationMessages[entry.key]">
<p class="validation-error" *ngIf="formGroup.get(entry.key).hasError(validation.type)">
<ion-text *ngIf="(formGroup.get(entry.key).dirty || formGroup.get(entry.key).touched)" color="danger">{{ spec.name }}: {{ validation.message }}</ion-text>
</p>
</div>
<form-error
*ngIf="formGroup.get(entry.key).errors"
[control]="formGroup.get(entry.key)"
[spec]="spec"
>
</form-error>
</ng-container>
</div>
</ion-item-group>

4
ui/src/app/components/form-object/form-object.component.module.ts
View File

@@ -1,6 +1,6 @@
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { FormObjectComponent, FormLabelComponent } from './form-object.component'
import { FormObjectComponent, FormLabelComponent, FormErrorComponent } from './form-object.component'
import { IonicModule } from '@ionic/angular'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { SharingModule } from 'src/app/modules/sharing.module'
@@ -10,6 +10,7 @@ import { EnumListPageModule } from 'src/app/modals/enum-list/enum-list.module'
declarations: [
FormObjectComponent,
FormLabelComponent,
FormErrorComponent,
],
imports: [
CommonModule,
@@ -22,6 +23,7 @@ import { EnumListPageModule } from 'src/app/modals/enum-list/enum-list.module'
exports: [
FormObjectComponent,
FormLabelComponent,
FormErrorComponent,
],
})
export class FormObjectComponentModule { }

1
ui/src/app/components/form-object/form-object.component.scss
View File

@@ -27,5 +27,6 @@ ion-item-divider {
.validation-error {
p {
font-size: small;
color: var(--ion-color-danger);
}
}

15
ui/src/app/components/form-object/form-object.component.ts
View File

@@ -1,5 +1,5 @@
import { Component, Input, SimpleChange } from '@angular/core'
import { FormArray, FormGroup } from '@angular/forms'
import { AbstractFormGroupDirective, FormArray, FormGroup } from '@angular/forms'
import { AlertController, ModalController } from '@ionic/angular'
import { ConfigSpec, ListValueSpecOf, ValueSpec, ValueSpecList, ValueSpecListOf, ValueSpecUnion } from 'src/app/pkg-config/config-types'
import { FormService } from 'src/app/services/form.service'
@@ -85,7 +85,7 @@ export class FormObjectComponent {
// const validators = this.formService.getListItemValidators(this.objectSpec[key] as ValueSpecList, key, arr.length)
// arr.push(new FormControl(value, validators))
const listSpec = this.objectSpec[key] as ValueSpecList
const newItem = this.formService.getListItem(key, arr.length, listSpec, val)
const newItem = this.formService.getListItem(listSpec, val)
newItem.markAllAsTouched()
arr.insert(0, newItem)
if (['object', 'union'].includes(listSpec.subtype)) {
@@ -222,3 +222,14 @@ export class FormLabelComponent {
await alert.present()
}
}
@Component({
selector: 'form-error',
templateUrl: './form-error.component.html',
styleUrls: ['./form-object.component.scss'],
})
export class FormErrorComponent {
@Input() control: AbstractFormGroupDirective
@Input() spec: ValueSpec
}