service-provider-app/src/app/param/manage-country/manage-country.component.html

<h2 class="page-header">Manage Country Messages</h2>
<div class="manage-container">

    <!-- Country Messages Form -->
    <div class="form-container">
        <form [formGroup]="countryForm" (ngSubmit)="saveRecord()">
            <div class="form-row">
                <mat-form-field appearance="outline">
                    <mat-label>Country</mat-label>
                    <mat-select [(value)]="currentCountryId" (selectionChange)="onCountrySelectionChanged($event)">
                        <mat-option *ngFor="let country of countries" [value]="country.paramId">
                            {{ country.paramDesc }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <div class="form-row">
                <mat-form-field appearance="outline">
                    <mat-label>Param Type</mat-label>
                    <input matInput formControlName="paramType" readonly required>
                    <mat-error *ngIf="countryForm.get('paramType')?.errors?.['required']">
                        Param Type is required
                    </mat-error>
                    <mat-error *ngIf="countryForm.get('paramType')?.errors?.['maxlength']">
                        Maximum 10 characters allowed
                    </mat-error>
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <mat-label>Description</mat-label>
                    <input matInput formControlName="paramDesc" required>
                    <mat-error *ngIf="countryForm.get('paramDesc')?.errors?.['required']">
                        Param Description is required
                    </mat-error>
                    <mat-error *ngIf="countryForm.get('paramDesc')?.errors?.['maxlength']">
                        Maximum 100 characters allowed
                    </mat-error>
                </mat-form-field>


            </div>

            <div class="form-row">
                <mat-form-field appearance="outline">
                    <mat-label>Additional Value 1</mat-label>
                    <input matInput formControlName="addlParamValue1">
                    <mat-error *ngIf="countryForm.get('addlParamValue1')?.errors?.['maxlength']">
                        Maximum 20 characters allowed
                    </mat-error>
                </mat-form-field>
            </div>

            <div class="form-row">

                <mat-form-field appearance="outline">
                    <mat-label>Additional Value 2</mat-label>
                    <input matInput formControlName="addlParamValue2">
                    <mat-error *ngIf="countryForm.get('addlParamValue2')?.errors?.['maxlength']">
                        Maximum 20 characters allowed
                    </mat-error>
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <mat-label>Additional Value 3</mat-label>
                    <input matInput formControlName="addlParamValue3">
                    <mat-error *ngIf="countryForm.get('addlParamValue3')?.errors?.['maxlength']">
                        Maximum 20 characters allowed
                    </mat-error>
                </mat-form-field>
            </div>

            <div class="form-row">

                <mat-form-field appearance="outline">
                    <mat-label>Additional Value 4</mat-label>
                    <input matInput formControlName="addlParamValue4">
                    <mat-error *ngIf="countryForm.get('addlParamValue4')?.errors?.['maxlength']">
                        Maximum 20 characters allowed
                    </mat-error>
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <mat-label>Additional Value 5</mat-label>
                    <input matInput formControlName="addlParamValue5">
                    <mat-error *ngIf="countryForm.get('addlParamValue5')?.errors?.['maxlength']">
                        Maximum 20 characters allowed
                    </mat-error>
                </mat-form-field>
            </div>

            <div class="form-actions">
                <button mat-raised-button color="primary" type="submit"
                    [disabled]="countryForm.invalid || changeInProgress">
                    Save
                </button>
                <button mat-button type="button" (click)="inActivateParamRecord(1)">Inactivate Record</button>
                <button mat-button type="button" (click)="reActivateParamRecord(1)">Reactivate Record</button>
            </div>
        </form>
    </div>

</div>