validation not firing while click on submit button using annular material 7
<form [formGroup]="promotionForm" novalidate>
<mat-card-content>
<mat-list>
<mat-list-item></mat-list-item>
<mat-list-item>
<mat-form-field>
<input matInput type="text" placeholder="Promotion Name" formControlName="name" name="name"
required />
<mat-error
*ngIf="(promotionForm.controls['name']?.hasError('minlength') && !promotionForm.controls['name']?.hasError('required')) || (promotionForm.controls['name']?.hasError('maxlength') && !promotionForm.controls['name']?.hasError('required'))">
Please enter a Promotion Name between 4 and 50 characters
</mat-error>
<mat-error *ngIf="promotionForm.controls['name']?.hasError('required')">
Promotion Name is <strong>required</strong>
</mat-error>
</mat-form-field>
</mat-list-item>
<mat-list-item></mat-list-item>
<mat-list-item>
<mat-form-field>
<mat-select placeholder="Select Store" formControlName="storeId">
<mat-option value="">--Select Store--</mat-option>
<mat-option *ngFor="let store of storeList" [value]="store.id">{{store.storeName}}
</mat-option>
</mat-select>
</mat-form-field>
</mat-list-item>
<mat-list-item></mat-list-item>
<mat-list-item>
<mat-form-field>
<mat-select placeholder="Promotion Type" formControlName="type">
<mat-option value="">--Select Promotion Type--</mat-option>
<mat-option [value] = 1 >Promotion</mat-option>
<mat-option [value] = 2 >Banner</mat-option>
</mat-select>
<mat-error *ngIf="promotionForm.controls['type']?.hasError('required')">
Promotion Type is <strong>required</strong>
</mat-error>
</mat-form-field>
</mat-list-item>
<mat-list-item></mat-list-item>
<mat-list-item>
<mat-form-field>
<input matInput type="text" placeholder="Radius" formControlName="radius" name="name"
required />
<mat-error *ngIf="promotionForm.controls['radius']?.hasError('required')">
Radius is <strong>required</strong>
</mat-error>
</mat-form-field>
</mat-list-item>
<mat-list-item></mat-list-item>
<div class="col-md-10">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<h4>Promotion Media</h4>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-list-item>
<div class="col-md-6">
<mat-form-field>
<input type="text" matInput maxlength="50" [(ngModel)]="PromotionName"
placeholder="Promotion Name" [ngModelOptions]="{standalone: true}" />
</mat-form-field>
</div>
<div class="col-md-3">
<button type="button" mat-flat-button color="primary"
(click)="searchPromotion()">
Search
</button>
</div>
</mat-list-item>
<mat-list-item></mat-list-item>
<mat-list-item>
<mat-card-title>
<h4>Choose Image(s) For Promotion</h4>
</mat-card-title>
</mat-list-item>
<mat-list-item></mat-list-item>
<div class="row media-margin-row"
*ngFor="let iteration of iterations; let index = index">
<div class="col-md-3"
*ngFor="let promotion of promotionList| slice:(index * 4):iteration">
<mat-card class="media-container">
<div class="img-div text-center"
(click)="media.isSelected = !media.isSelected;">
<img src="{{media}}" alt="{{media}}" />
</div>
<div class="text-center">
<mat-card-title>{{promotion.name}}</mat-card-title>
</div>
<div class="text-right">
<mat-checkbox [(ngModel)]="promotion.isSelected"
[ngModelOptions]="{standalone: true}"></mat-checkbox>
</div>
</mat-card>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</mat-list>
</mat-card-content>
</form>
<mat-card-actions>
<button mat-flat-button color="primary" class="btn-center" (click)="savePromotion()">
<i class="menu-icon {{promotionIcon}}"></i> Update Promotion
</button>
</mat-card-actions>
and ts
this.promotionForm = this.fb.group({
name: new FormControl('', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(50)])),
storeId: new FormControl('', Validators.required),
type: new FormControl('', Validators.required),
radius: new FormControl(0, Validators.required)
});
пожалуйста, дайте мне знать, где проблема услышать. Я перепроверил по-разному, но не происходит. используя угловой материал 7. поэтому, пожалуйста, дайте мне знать, решение. Я новичок в угловых, если не мой.
пожалуйста, дайте мне знать, где проблема слышать. Я перепроверил по-разному, но не происходит. используя угловой материал 7. поэтому, пожалуйста, дайте мне знать.