add-affiliate-dialog.component.html
4.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<mat-card>
<mat-toolbar color="primary">Add Affiliates</mat-toolbar>
<form [formGroup]="form">
<mat-card-content>
<div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="First name" [formControl]="form.controls['fname']" required>
<mat-error
*ngIf="form.controls['fname'].hasError('required') && form.controls['fname'].touched">
You
must include a first name.</mat-error>
<mat-error class="mat-text-warn"
*ngIf="form.controls['fname'].hasError('minlength') && form.controls['fname'].touched">
Your
first name must be at least 5 characters long.</mat-error>
<mat-error class="mat-text-warn"
*ngIf="form.controls['fname'].hasError('maxlength') && form.controls['fname'].touched">
Your
first name cannot exceed 10 characters.</mat-error>
</mat-form-field>
<mat-form-field fxFlex style="width: 30%">
<input matInput placeholder="Last name" [formControl]="form.controls['lname']" required>
<mat-error
*ngIf="form.controls['lname'].hasError('required') && form.controls['lname'].touched"
class="mat-text-warn">You must include a last name.</mat-error>
<mat-error
*ngIf="form.controls['lname'].hasError('minlength') && form.controls['lname'].touched"
class="mat-text-warn">Your last name must be at least 5 characters long.</mat-error>
<mat-error
*ngIf="form.controls['lname'].hasError('maxlength') && form.controls['lname'].touched"
class="mat-text-warn">Your last name cannot exceed 10 characters.</mat-error>
</mat-form-field>
<mat-form-field style="width: 30%">
<input matInput placeholder="User name" [formControl]="form.controls['uname']" required>
<mat-error
*ngIf="form.controls['uname'].hasError('required') && form.controls['uname'].touched"
class="mat-text-warn">You must include a user name.</mat-error>
<mat-error
*ngIf="form.controls['uname'].hasError('minlength') && form.controls['uname'].touched"
class="mat-text-warn">Your user name must be at least 5 characters long.</mat-error>
<mat-error
*ngIf="form.controls['uname'].hasError('maxlength') && form.controls['uname'].touched"
class="mat-text-warn">Your user name cannot exceed 10 characters.</mat-error>
</mat-form-field>
</div>
</div>
<div fxLayout="row wrap">
<div class="pb-1">
<mat-form-field style="width: 30%">
<input matInput placeholder="Password" [formControl]="form.controls['password']" type="password"
required>
<mat-error
*ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched"
class="mat-text-warn ">You must include password.</mat-error>
</mat-form-field>
<mat-form-field style="width: 30%">
<input matInput placeholder="Email address" [formControl]="form.controls['email']" type="email"
required>
<mat-error
*ngIf="form.controls['email'].hasError('required') && form.controls['email'].touched"
class="mat-text-warn">You must include an email address.</mat-error>
<mat-error
*ngIf="form.controls['email'].errors?.email && form.controls['email'].touched"
class="mat-text-warn">You
must include a valid email address.</mat-error>
</mat-form-field>
<mat-form-field style="width: 30%">
<input matInput placeholder="Mobile" required>
</mat-form-field>
</div>
</div>
<div fxLayout="row wrap">
<div class="mb-1">
<mat-form-field style="width: 90%">
<textarea matInput maxlength="256" placeholder="Address" matTextareaAutosize matAutosizeMinRows="2"
matAutosizeMaxRows="5"></textarea>
</mat-form-field>
</div>
<div class="mb-1">
<label>Gender</label>
<mat-radio-group>
<mat-radio-button value="male">Male</mat-radio-button>
<mat-radio-button value="female">Female</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-card-content>
<div>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Submit</button>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">Close</button>
</mat-card-actions>
</div>
</form>
</mat-card>