module2-angular-lab3/app.component.html at master · Deppesh12/module2-angular-lab3 · GitHub

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
<body>
  <form name="form" (ngSubmit)="f.form.valid && onSubmit(f.value)" #f="ngForm" >
    <div class="form-group row">
      <label class="col-sm-2 col-form-label">Product ID</label>
      <div class="col-sm-3">
        <input type="number" class="form-control" name="pid" [(ngModel)]="pid" #Id="ngModel"
        [ngClass]="{'is-invalid':f.submitted && Id.invalid}" required>
        <div *ngIf="f.submitted&&Id.invalid" class="invalid-feedback">
          <div *ngIf="Id.errors.required">ID is required</div>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label">Product Name</label>
      <div class="col-sm-3">
        <input type="text" class="form-control" name="pname" [(ngModel)]="ProductName" #name="ngModel"
        [ngClass]="{'is-invalid':f.submitted && name.invalid}" required>
        <div *ngIf="f.submitted&&name.invalid" class="invalid-feedback">
          <div *ngIf="name.errors.required">Name is required</div>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label">Product Cost</label>
      <div class="col-sm-3">
        <input type="number" class="form-control" name="pcost" [(ngModel)]="ProductCost" #cost="ngModel"
        [ngClass]="{'is-invalid':f.submitted && cost.invalid}" required>
        <div *ngIf="f.submitted&&cost.invalid" class="invalid-feedback">
          <div *ngIf="cost.errors.required">Cost is required</div>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label">Product Online</label>
      <div class="col-sm-3">
        <div class="custom-control custom-radio">
        <input type="radio"  name="ponline"  [(ngModel)]="ProductOnline" #online="ngModel"
        [ngClass]="{'is-invalid':f.submitted && online.invalid}" value="yes" required>Yes&nbsp;
        <input type="radio"  name="ponline"  [(ngModel)]="ProductOnline" #online="ngModel"
        [ngClass]="{'is-invalid':f.submitted && online.invalid}" value="No" required>No
        <div *ngIf="f.submitted && online.invalid" class="invalid-feedback">
          <div *ngIf="online.errors.required">Required</div>
        </div>
        </div>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 col-form-label">Product Category</label>
      <div class="col-sm-3">
        <select name="cat" [(ngModel)]="ProductCat" #cat="ngModel"
        [ngClass]="{'is-invalid':f.submitted && cat.invalid}" required>
          <option>Grocery</option>
          <option>Mobile</option>
          <option>Electronics</option>
          <option>Cloths</option>
        </select>
        <div *ngIf="f.submitted && cat.invalid" class="invalid-feedback">
          <div *ngIf="cat.errors.required">Required</div>
        </div>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 col-form-label">Available in Store</label>
      <div class="col-sm-4">

        <input type="checkbox" name="cb1" [(ngModel)]="Available" #avail="ngModel"
        [ngClass]="{'is-invalid':f.submitted && avail.invalid}" value="Big Bazar" required>Big Bazar
        <input type="checkbox" name="cb1" ngModel #avail="ngModel"
        [ngClass]="{'is-invalid':f.submitted && avail.invalid}" value="DMart" required>DMart
        <input type="checkbox" name="cb1" ngModel #avail="ngModel"
        [ngClass]="{'is-invalid':f.submitted && avail.invalid}" required>Reliance
        <input type="checkbox" name="cb1" ngModel #avail="ngModel"
        [ngClass]="{'is-invalid':f.submitted && avail.invalid}" required>Mega Store
        <div *ngIf="avail.invalid && f.submitted" class="invalid-feedback">
          <div *ngIf="avail.errors.required">Required</div>
        </div>

      </div>
    </div>

    <div >
      <button class="btn btn-secondary">Add Product</button>
      <button>Test Button</button>
      <button>Test Button 2</button>

    </div>
  </form>
</body>