generated from garrettmills/template-npm-typescript
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.3 KiB
63 lines
1.3 KiB
2 years ago
|
import {ExComponent} from '../ExComponent.js'
|
||
|
import {Attribute, Component} from '../decorators.js'
|
||
|
import {FormControl, FormField, FormData} from './types.js'
|
||
|
|
||
|
@Component('ex-form')
|
||
|
export class FormComponent extends ExComponent implements FormControl {
|
||
|
protected static html = `
|
||
|
<style>
|
||
|
slot {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<div class="container">
|
||
|
<slot></slot>
|
||
|
</div>
|
||
|
`
|
||
|
|
||
|
protected fields: FormField[] = []
|
||
|
|
||
|
@Attribute()
|
||
|
public name?: string
|
||
|
|
||
|
hasField(field: FormField): boolean {
|
||
|
return this.fields.some(maybe => maybe.getFieldName() === field.getFieldName())
|
||
|
}
|
||
|
|
||
|
registerField(field: FormField): void {
|
||
|
this.fields.push(field)
|
||
|
}
|
||
|
|
||
|
gather(): FormData {
|
||
|
const data: FormData = {}
|
||
|
|
||
|
for ( const field of this.fields ) {
|
||
|
data[field.getFieldName()] = field.getValue()
|
||
|
}
|
||
|
|
||
|
return data
|
||
|
}
|
||
|
|
||
|
processChanges(): void {
|
||
|
for ( const field of this.fields ) {
|
||
|
field.validate()
|
||
|
}
|
||
|
}
|
||
|
|
||
|
isValid(): boolean {
|
||
|
let valid = true
|
||
|
|
||
|
for ( const field of this.fields ) {
|
||
|
valid = field.validate() && valid
|
||
|
}
|
||
|
|
||
|
return valid
|
||
|
}
|
||
|
|
||
|
async submit(): Promise<void> {
|
||
|
(3 + 4)
|
||
|
}
|
||
|
}
|