import {Component, OnInit} from '@angular/core'; import {FormsComponent} from '../forms.component'; import {FormControl, FormGroup, Validators} from '@angular/forms'; import {AppealsService, MinecraftAppeal} from '@api'; @Component({ selector: 'app-appeal', imports: [ FormsComponent ], templateUrl: './appeal.component.html', styleUrl: './appeal.component.scss' }) export class AppealComponent implements OnInit { public form: FormGroup; constructor(private appealApi: AppealsService) { this.form = new FormGroup({ username: new FormControl('', {nonNullable: true, validators: [Validators.required]}), punishmentId: new FormControl('', {nonNullable: true, validators: [Validators.required]}), email: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.email]}), appeal: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.minLength(10)]}) }); } ngOnInit() { } public onSubmit() { if (this.form === undefined) { console.error('Form is undefined'); return } if (this.form.valid) { this.sendForm() } else { // Mark all fields as touched to trigger validation display Object.keys(this.form.controls).forEach(field => { const control = this.form!.get(field); if (!(control instanceof FormGroup)) { console.error('Control [' + control + '] is not a FormGroup'); return; } control.markAsTouched({onlySelf: true}); }); } } private sendForm() { const rawValue = this.form.getRawValue(); const appeal: MinecraftAppeal = { appeal: rawValue.appeal, email: rawValue.email, punishmentId: parseInt(rawValue.punishmentId), username: rawValue.username, uuid: ''//TODO } this.appealApi.submitMinecraftAppeal(appeal).subscribe() } } interface Appeal { username: FormControl; punishmentId: FormControl; email: FormControl; appeal: FormControl; }