SHARE
TWEET

Untitled

a guest Aug 26th, 2019 76 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <h1 mat-dialog-title>{{data.title}}</h1>
  2. <div mat-dialog-content>
  3.  
  4.   <ng-template [ngIf]="tasks.length" *ngFor="let task of tasks">
  5.  
  6.     <!-- Edit Task Form -->
  7.     <form class="example-form" (ngSubmit)="onSubmit()" [formGroup]="taskForm" #userForm="ngForm" novalidate>
  8.  
  9.       <!-- Title input -->
  10.       <mat-form-field [ngClass]="{
  11.        'has-danger': title.invalid && (title.dirty || title.touched),
  12.        'has-success': title.valid && (title.dirty || title.touched)
  13.      }">
  14.  
  15.         <input matInput placeholder="Title" type="text" required name="title" [(ngModel)]="task.title"
  16.          formControlName="title" required>
  17.  
  18.         <div *ngIf="title.errors && (title.dirty || title.touched)" class="validation-feedback">
  19.           <div *ngIf="title.errors.required" class="alert alert-danger">This field is required!</div>
  20.           <div *ngIf="title.errors.pattern" class="alert alert-danger">Invalid chars - only letters allowed!</div>
  21.         </div>
  22.       </mat-form-field>
  23.  
  24.       <!-- Description Input -->
  25.       <mat-form-field [ngClass]="{
  26.        'has-danger': description.invalid && (description.dirty || description.touched),
  27.        'has-success': description.valid && (description.dirty || description.touched)
  28.      }">
  29.  
  30.         <textarea matInput placeholder="Description" required name="description" [(ngModel)]="task.description"
  31.          formControlName="description" required></textarea>
  32.  
  33.         <div *ngIf="description.errors && (description.dirty || description.touched)" class="validation-feedback">
  34.           <div *ngIf="description.errors.required" class="alert alert-danger">This field is required!</div>
  35.         </div>
  36.       </mat-form-field>
  37.  
  38.       <!-- Category Select -->
  39.       <mat-form-field [ngClass]="{
  40.        'has-danger': category.invalid && (category.dirty || category.touched),
  41.        'has-success': category.valid && (category.dirty || category.touched)
  42.      }">
  43.  
  44.         <mat-select matInput placeholder="Category" required name="category" [(ngModel)]="task.category"
  45.           formControlName="category" required>
  46.           <mat-option *ngFor="let category of categories" [value]="category.name">
  47.             {{ category.name }}
  48.           </mat-option>
  49.         </mat-select>
  50.  
  51.         <div *ngIf="category.errors && (category.dirty || category.touched)" class="validation-feedback">
  52.           <div *ngIf="category.errors.required" class="alert alert-danger">This field is required!</div>
  53.         </div>
  54.       </mat-form-field>
  55.  
  56.       <!-- Type Radio -->
  57.       <div class="task-types" [ngClass]="{
  58.        'has-danger': type.invalid && (type.dirty || type.touched),
  59.        'has-success': type.valid && (type.dirty || type.touched)
  60.      }">
  61.  
  62.         <label>Typ * </label>
  63.  
  64.         <mat-radio-group matInput aria-label="Select an option" required name="type" [(ngModel)]="task.type"
  65.          formControlName="type" required>
  66.           <mat-radio-button *ngFor="let type of types" [value]="type.name">
  67.             {{ type.name }}
  68.           </mat-radio-button>
  69.         </mat-radio-group>
  70.  
  71.         <div *ngIf="type.errors && (type.dirty || type.touched)" class="validation-feedback">
  72.           <div *ngIf="type.errors.required" class="alert alert-danger">This field is required!</div>
  73.         </div>
  74.       </div>
  75.  
  76.       <!-- Save button -->
  77.       <div id="submit_wrapper">
  78.         <button mat-raised-button type="submit" color="primary"
  79.          [disabled]="!userForm.form.valid">{{data.button}}</button>
  80.         <div id="not_validated" *ngIf="!userForm.form.valid">
  81.           Some fields are empty or incorrect!
  82.         </div>
  83.       </div>
  84.  
  85.     </form>
  86.   </ng-template>
  87.  
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95.  
  96.  
  97.   <!-- Add task Form -->
  98.   <ng-template [ngIf]="!tasks.length">
  99.  
  100.     <form class="example-form" (ngSubmit)="onSubmit()" [formGroup]="taskForm" #userForm="ngForm" novalidate>
  101.  
  102.       <!-- Title input -->
  103.       <mat-form-field [ngClass]="{
  104.          'has-danger': title.invalid && (title.dirty || title.touched),
  105.          'has-success': title.valid && (title.dirty || title.touched)
  106.        }">
  107.  
  108.         <input matInput placeholder="Title" type="text" required name="title" [(ngModel)]="task.title"
  109.          formControlName="title" required>
  110.  
  111.         <div *ngIf="title.errors && (title.dirty || title.touched)" class="validation-feedback">
  112.           <div *ngIf="title.errors.required" class="alert alert-danger">This field is required!</div>
  113.           <div *ngIf="title.errors.pattern" class="alert alert-danger">Invalid chars - only letters allowed!</div>
  114.         </div>
  115.       </mat-form-field>
  116.  
  117.       <!-- Description Input -->
  118.       <mat-form-field [ngClass]="{
  119.          'has-danger': description.invalid && (description.dirty || description.touched),
  120.          'has-success': description.valid && (description.dirty || description.touched)
  121.        }">
  122.  
  123.         <textarea matInput placeholder="Description" required name="description" [(ngModel)]="task.description"
  124.          formControlName="description" required></textarea>
  125.  
  126.         <div *ngIf="description.errors && (description.dirty || description.touched)" class="validation-feedback">
  127.           <div *ngIf="description.errors.required" class="alert alert-danger">This field is required!</div>
  128.         </div>
  129.       </mat-form-field>
  130.  
  131.       <!-- Category Select -->
  132.       <mat-form-field [ngClass]="{
  133.          'has-danger': category.invalid && (category.dirty || category.touched),
  134.          'has-success': category.valid && (category.dirty || category.touched)
  135.        }">
  136.  
  137.         <mat-select matInput placeholder="Category" required name="category" [(ngModel)]="task.category"
  138.           formControlName="category" required>
  139.           <mat-option *ngFor="let category of categories" [value]="category.name">
  140.             {{ category.name }}
  141.           </mat-option>
  142.         </mat-select>
  143.  
  144.         <div *ngIf="category.errors && (category.dirty || category.touched)" class="validation-feedback">
  145.           <div *ngIf="category.errors.required" class="alert alert-danger">This field is required!</div>
  146.         </div>
  147.       </mat-form-field>
  148.  
  149.       <!-- Type Radio -->
  150.       <div class="task-types" [ngClass]="{
  151.          'has-danger': type.invalid && (type.dirty || type.touched),
  152.          'has-success': type.valid && (type.dirty || type.touched)
  153.        }">
  154.  
  155.         <label>Typ * </label>
  156.  
  157.         <mat-radio-group matInput aria-label="Select an option" required name="type" [(ngModel)]="task.type"
  158.          formControlName="type" required>
  159.           <mat-radio-button *ngFor="let type of types" [value]="type.name">
  160.             {{ type.name }}
  161.           </mat-radio-button>
  162.         </mat-radio-group>
  163.  
  164.         <div *ngIf="type.errors && (type.dirty || type.touched)" class="validation-feedback">
  165.           <div *ngIf="type.errors.required" class="alert alert-danger">This field is required!</div>
  166.         </div>
  167.       </div>
  168.  
  169.       <!-- Save button -->
  170.       <div id="submit_wrapper">
  171.         <button mat-raised-button type="submit" color="primary"
  172.          [disabled]="!userForm.form.valid">{{data.button}}</button>
  173.         <div id="not_validated" *ngIf="!userForm.form.valid">
  174.           Some fields are empty or incorrect!
  175.         </div>
  176.       </div>
  177.  
  178.     </form>
  179.   </ng-template>
  180.  
  181. </div>
  182.  
  183. <!-- Cancel button -->
  184. <div mat-dialog-actions>
  185.   <button mat-raised-button class="close" (click)="onNoClick()" color="warn">Cancel</button>
  186. </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top