Aus SatriaWiki
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „== UI == === Datum formatieren === <code><poem> (new Date()).toLocaleDateString("de-DE", { day: '2-digit', month: '2-digit', year: 'numeric' }); </poem></code>…“)
 
Zeile 25: Zeile 25:
 
   {
 
   {
 
     this.angForm = formBuilder.group({
 
     this.angForm = formBuilder.group({
       email: ['', Validators.required]
+
       email: ['', Validators.required],
 +
      special: ['', this.customValidation("DE")]
 
     })
 
     })
 +
  }
 +
 +
  customValidation(loc: string) : ValidatorFn
 +
  {
 +
    return (control: AbstractControl) =>
 +
    {
 +
      if (loc == "DE" && control.value == "Deutsch")
 +
        return null;
 +
      else
 +
        return { wrongCountry: true };
 +
    }
 
   }
 
   }
 
}
 
}
Zeile 33: Zeile 45:
 
<code><poem><nowiki>
 
<code><poem><nowiki>
 
<input type="text" formControlName="email" [(ngModel)]="useremail"/>
 
<input type="text" formControlName="email" [(ngModel)]="useremail"/>
 
 
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)">
 
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)">
 
   <div *ngIf="angForm.controls['email'].errors.required">
 
   <div *ngIf="angForm.controls['email'].errors.required">
 +
    Pflichtfeld!
 +
  </div>
 +
</div>
 +
 +
<input type="text" formControlName="special" [(ngModel)]="custom"/>
 +
<div *ngIf="angForm.controls['special'].invalid && (angForm.controls['special'].dirty || angForm.controls['special'].touched)">
 +
  <div *ngIf="angForm.controls['special'].errors.wrongCountry">
 +
    Falsches Land!
 
   </div>
 
   </div>
 
</div>
 
</div>
 
</nowiki></poem></code>
 
</nowiki></poem></code>
 
|}
 
|}

Version vom 14. Januar 2020, 15:22 Uhr

UI

Datum formatieren

(new Date()).toLocaleDateString("de-DE", { day: '2-digit', month: '2-digit', year: 'numeric' });

Quellen:

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

Eingabe

Validierungen

component.ts template.html


import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
class
{
  angForm: FormGroup;

  constructor(private formBuilder: FormBuilder)
  {
    this.angForm = formBuilder.group({
      email: ['', Validators.required],
      special: ['', this.customValidation("DE")]
    })
  }

  customValidation(loc: string) : ValidatorFn
  {
    return (control: AbstractControl) =>
    {
      if (loc == "DE" && control.value == "Deutsch")
        return null;
      else
        return { wrongCountry: true };
    }
  }
}


<input type="text" formControlName="email" [(ngModel)]="useremail"/>
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)">
  <div *ngIf="angForm.controls['email'].errors.required">
    Pflichtfeld!
  </div>
</div>

<input type="text" formControlName="special" [(ngModel)]="custom"/>
<div *ngIf="angForm.controls['special'].invalid && (angForm.controls['special'].dirty || angForm.controls['special'].touched)">
  <div *ngIf="angForm.controls['special'].errors.wrongCountry">
    Falsches Land!
  </div>
</div>