zenon/web-application-engineering
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add validators for URL and keywords

Browse Source
This commit is contained in:
Tobias Eidelpes 2021-05-03 15:15:34 +02:00
parent 55f41cabb8
commit da2c0efdf2
4 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/component/einstellungen/editieren/editieren.component.html
View File

@ -6,13 +6,15 @@
<div class=" input-row">
<mat-form-field appearance="standard" class="input">
<mat-label>Vollständige URL des RSS-Feeds</mat-label>
<input matInput formControlName="url" placeholder="https://rss.orf.at/news.xml" required>
<input matInput type="url" formControlName="url" placeholder="https://rss.orf.at/news.xml" required>
<mat-error *ngIf="feedForm.get('url').hasError('invalidURLFormat')">Geben Sie eine valide URL ein.</mat-error>
</mat-form-field>
</div>
<div class="input-row text-left">
<mat-form-field appearance="standard" class="input">
<mat-label>Gesuchte Stichwörter</mat-label>
<mat-label>Gesuchte Stichworte</mat-label>
<input matInput formControlName="keywords" placeholder="Spiel,Spaß,Schokolade" required>
<mat-error *ngIf="feedForm.get('keywords').hasError('invalidKeywords')">Maximal 3 Wörter und jedes Wort mindestens 3 Zeichen</mat-error>
</mat-form-field>
<mat-checkbox formControlName="match_all_keywords">Alle Stichworte müssen enthalten sein</mat-checkbox>
</div>
@ -24,7 +26,7 @@
<mat-error *ngIf="feedForm.get('icon').hasError('maxContentSize')">
Die maximale Dateigröße ist {{feedForm.get('icon')?.getError('maxContentSize').maxSize | byteFormat}}
({{feedForm.get('icon')?.getError('maxContentSize').actualSize
| byteFormat}}).
| byteFormat}})
</mat-error>
</mat-form-field>
</div>

8
frontend/src/app/component/einstellungen/editieren/editieren.component.ts
View File

@ -1,6 +1,6 @@
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {FormGroup, FormBuilder} from '@angular/forms';
import {FormGroup, FormBuilder, AbstractControl} from '@angular/forms';
import {FileInput, FileValidator} from 'ngx-material-file-input';
import {HttpClient} from '@angular/common/http';
import {environment} from '../../../../environments/environment';
@ -9,6 +9,8 @@ import {NGXLogger} from 'ngx-logger';
import {MatSnackBar} from '@angular/material/snack-bar';
import {DialogComponent} from '../../dialog/dialog.component';
import {MatDialog} from '@angular/material/dialog';
import {URLFormatValidator} from '../../../validators/url.validator';
import {keywordsValidator} from '../../../validators/keywords.validator';
@Component({
selector: 'app-editieren',
@ -44,10 +46,10 @@ export class EditierenComponent implements OnInit {
ngOnInit(): void {
this.feedForm = this.formBuilder.group({
url: this.url,
url: [this.url, [URLFormatValidator]],
active: this.active,
icon: [undefined, [FileValidator.maxContentSize(this.maxSize)]],
keywords: this.keywords,
keywords: [this.keywords, [keywordsValidator]],
match_all_keywords: this.match_all_keywords
});
}

6
frontend/src/app/validators/keywords.validator.ts Normal file
View File

@ -0,0 +1,6 @@
import {AbstractControl} from '@angular/forms';
export function keywordsValidator(control: AbstractControl): { [key: string]: any } | null {
const valid = /^((\w){3,},?){1,2}(\w{3,})?$/.test(control.value);
return valid ? null : {'invalidKeywords': {value: control.value}};
}

6
frontend/src/app/validators/url.validator.ts Normal file
View File

@ -0,0 +1,6 @@
import {AbstractControl} from '@angular/forms';
export function URLFormatValidator(control: AbstractControl): {[key: string]: any} | null {
const valid = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/.test(control.value);
return valid ? null : {'invalidURLFormat': {value: control.value}};
}