Regarding not displaying of mat-card - html

Question

Ive used a mat-card,inside that ive used mat-card-title and a form with 4 to 5 controls,mat-card layout is not visible on deployment in the browser,but mat-card title is displaying,Ive posted the form content and controls inside the mat-card-content only
Here is the template code,
<mat-card id="card" style="text-align: center;">
<mat-card-title>Details</mat-card-title>
<mat-card-content>
<form [formGroup] = "activityPlannerService.form" class="normal-form" (submit) = "onSubmit()">
<mat-grid-list cols="2" rowHeight="400px">
<mat-grid-tile>
<div class="controlers-container">
<input type="hidden" formControlName="$key">
<mat-form-field>
<mat-select formControlName="releaseName" placeholder="Release Name *">
<mat-option>None</mat-option>
<ng-container *ngFor="let release of releaseArray">
<mat-option value = "{{release.label}}">{{release.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="sprintName" placeholder="Sprint Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let sprint of sprintArray">
<mat-option value = "{{sprint.label}}">{{sprint.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="userName" placeholder="User Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let user of userArray">
<mat-option value = "{{user.label}}">{{user.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="activity" placeholder="Activities *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let activity of activitiesArray">
<mat-option value = "{{activity.label}}">{{activity.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="plannedEffort" matInput placeholder="Planned Efforts">
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" [disabled]="activityPlannerService.form.invalid">Submit</button>
<button mat-raised-button color="warn" (click) = "onClear()">Clear</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
</mat-card-content>
</mat-card>
Here is the image of the browser output window,
I know i just made a minor mistake,im a new learner,please correct me,Thanks in advance:-)

Answer 1

Please try using the following line of code .
<mat-card>
<mat-card-header>
<mat-card-title>Details</mat-card-title>
</mat-card-header>
<form [formGroup]="activityPlannerService.form" class="normal-form" (submit)="onSubmit()">
<mat-card-content>
<mat-grid-list cols="2" rowHeight="400px">
<mat-grid-tile>
<div class="controlers-container">
<input type="hidden" formControlName="$key">
<mat-form-field>
<mat-select formControlName="releaseName" placeholder="Release Name *">
<mat-option>None</mat-option>
<ng-container *ngFor="let release of releaseArray">
<mat-option value="{{release.label}}">{{release.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="sprintName" placeholder="Sprint Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let sprint of sprintArray">
<mat-option value="{{sprint.label}}">{{sprint.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="userName" placeholder="User Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let user of userArray">
<mat-option value="{{user.label}}">{{user.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="activity" placeholder="Activities *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let activity of activitiesArray">
<mat-option value="{{activity.label}}">{{activity.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="plannedEffort" matInput placeholder="Planned Efforts">
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
</div>
</mat-grid-tile>
</mat-grid-list>
</mat-card-content>
<mat-card-actions>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" [disabled]="activityPlannerService.form.invalid">Submit</button>
<button mat-raised-button color="warn" (click)="onClear()">Clear</button>
</div>
</mat-card-actions>
</form>
</mat-card>