|
|
@@ -1,60 +1,53 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <title>Title</title>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
-<form [formGroup]="articleForm" (ngSubmit)="handleSubmit()">
|
|
|
- <h2 class="form-header">{{ title }} Article</h2>
|
|
|
- <label>Title</label>
|
|
|
- <input type="text" formControlName="title" required/>
|
|
|
- <span class="input-error">
|
|
|
- @if (formSubmitted && articleForm.controls.title.errors?.['required']) {
|
|
|
- Please enter a title
|
|
|
- }
|
|
|
+<div class="form-container">
|
|
|
+ <form [formGroup]="articleForm" (ngSubmit)="handleSubmit()">
|
|
|
+ <h2 class="form-header">{{ title }} Article</h2>
|
|
|
+ <label>Title:</label>
|
|
|
+ <input type="text" formControlName="title" required [ngClass]="{'error-border': (formSubmitted && articleForm.controls.title.errors?.['required']) || articleForm.controls.title.errors?.['invalidString']}">
|
|
|
+ <span class="input-error">
|
|
|
+ @if (formSubmitted && articleForm.controls.title.errors?.['required']) {
|
|
|
+ Please enter a title
|
|
|
+ }
|
|
|
|
|
|
- @if (articleForm.controls.title.errors?.['invalidString']) {
|
|
|
- Please ensure the title only contains letters
|
|
|
- }
|
|
|
+ @if (articleForm.controls.title.errors?.['invalidString']) {
|
|
|
+ Please ensure the title only contains letters
|
|
|
+ }
|
|
|
+ </span>
|
|
|
+ <label>Text:</label>
|
|
|
+ <input type="text" formControlName="text" required [ngClass]="{'error-border': (formSubmitted && articleForm.controls.text.errors?.['required']) || articleForm.controls.text.errors?.['invalidString']}">
|
|
|
+ <span class="input-error">
|
|
|
+ @if (formSubmitted && articleForm.controls.text.errors?.['required']) {
|
|
|
+ Please enter a text
|
|
|
+ }
|
|
|
|
|
|
- </span>
|
|
|
- <label>Text</label>
|
|
|
- <input type="text" formControlName="text" required/>
|
|
|
- <span class="input-error">
|
|
|
- @if (formSubmitted && articleForm.controls.text.errors?.['required']) {
|
|
|
- Please enter a text
|
|
|
- }
|
|
|
+ @if (articleForm.controls.text.errors?.['invalidString']) {
|
|
|
+ Please ensure the text only contains letters
|
|
|
+ }
|
|
|
+ </span>
|
|
|
+ <label>Category:</label>
|
|
|
+ <select id="categoryNames" formControlName="categoryName" required>
|
|
|
+ <option [value]="null" disabled>--Select a category--</option>
|
|
|
+ @for (cn of categoryNames; track cn) {
|
|
|
+ <option [value]="cn">{{ cn }}</option>
|
|
|
+ }
|
|
|
+ </select>
|
|
|
+ <span class="input-error">
|
|
|
+ @if (formSubmitted && articleForm.controls.categoryName.errors?.['required']) {
|
|
|
+ Please select a category
|
|
|
+ }
|
|
|
+ </span>
|
|
|
+ <label>Article Group:</label>
|
|
|
+ <select id="articleGroups" formControlName="articleGroupId">
|
|
|
+ <option [value]="null" disabled>--Select a Article Group--</option>
|
|
|
+ @for (ag of articleGroups$ | async; track ag.id) {
|
|
|
+ <option [value]="ag.id">{{ ag.name }}</option>
|
|
|
+ }
|
|
|
+ </select>
|
|
|
+ <span class="input-error">
|
|
|
+ @if (formSubmitted && articleForm.controls.articleGroupId.errors?.['required']) {
|
|
|
+ Please select a Article Group
|
|
|
+ }
|
|
|
+ </span>
|
|
|
+ <input type="submit" value='{{ submitButtonName }}'>
|
|
|
+ </form>
|
|
|
+</div>
|
|
|
|
|
|
- @if (articleForm.controls.text.errors?.['invalidString']) {
|
|
|
- Please ensure the text only contains letters
|
|
|
- }
|
|
|
- </span>
|
|
|
- <label>Category</label>
|
|
|
- <select id="categoryNames" formControlName="categoryName" required>
|
|
|
- <option [value]="null" disabled>--Select a category--</option>
|
|
|
- @for (cn of categoryNames; track cn) {
|
|
|
- <option [value]="cn">{{ cn }}</option>
|
|
|
- }
|
|
|
- </select>
|
|
|
- <span class="input-error">
|
|
|
- @if (formSubmitted && articleForm.controls.categoryName.errors?.['required']) {
|
|
|
- Please select a category
|
|
|
- }
|
|
|
- </span>
|
|
|
- <label>Article Group</label>
|
|
|
- <select id="articleGroups" formControlName="articleGroupId">
|
|
|
- <option [value]="null" disabled>--Select a Article Group--</option>
|
|
|
- @for (ag of articleGroups$ | async; track ag.id) {
|
|
|
- <option [value]="ag.id">{{ ag.name }}</option>
|
|
|
- }
|
|
|
- </select>
|
|
|
- <span class="input-error">
|
|
|
- @if (formSubmitted && articleForm.controls.articleGroupId.errors?.['required']) {
|
|
|
- Please select a Article Group
|
|
|
- }
|
|
|
- </span>
|
|
|
- <input type="submit" value='{{ submitButtonName }}'>
|
|
|
-</form>
|
|
|
-</body>
|
|
|
-</html>
|
