Toast/shows-admin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Components/create-modal: add form

Browse source
This commit is contained in:
Toast 2025-01-29 17:50:16 +01:00
parent 8fa6f48b65
commit b92e54beab
2 changed files with 45 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/create-modal/create-modal/create-modal.component.html
View file

@ -3,5 +3,25 @@
<button type="button" class="btn-close" aria-label="Close" (click)="dismiss()"></button>
</div>
<div class="modal-body">
<p>Hello</p>
<form [formGroup]="newShowForm" (ngSubmit)="formSubmitted(newShowForm)">
<div class="mb-3">
<label class="form-label">Title</label>
<input formControlName="title" type="text" class="form-control"/>
</div>
<div class="mb-3">
<label class="form-label">Year</label>
<input formControlName="year" type="number" class="form-control"/>
</div>
<div class="mb-3">
<label class="form-label">Seasons</label>
<input formControlName="seasons" type="number" class="form-control"/>
</div>
<div class="mb-3">
<label class="form-label">Description</label>
<input formControlName="description" type="text" class="form-control"/>
</div>
<div class="d-grid justify-content-md-end">
<button type="submit" class="btn btn-success" [disabled]="newShowForm.invalid">Submit</button>
</div>
</form>
</div>

25
src/components/create-modal/create-modal/create-modal.component.ts
View file

@ -1,16 +1,39 @@
import {Component, inject} from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
@Component({
selector: 'app-create-modal',
imports: [],
imports: [
ReactiveFormsModule
],
templateUrl: './create-modal.component.html',
styleUrl: './create-modal.component.css'
})
export class CreateModalComponent {
private activeModal = inject(NgbActiveModal)
protected newShowForm: FormGroup
constructor() {
this.newShowForm = new FormGroup({
title: new FormControl("", Validators.required),
year: new FormControl("", [Validators.required, Validators.min(1900)]),
seasons: new FormControl("", [Validators.required, Validators.min(1)]),
description: new FormControl("", Validators.required)
})
}
protected dismiss() {
this.activeModal.dismiss()
}
protected formSubmitted(form: FormGroup) {
let show: {} = {
title: form.get("title")?.value,
year: form.get("year")?.value,
seasons: form.get("seasons")?.value,
description: form.get("description")?.value
}
console.log(show)
}
}