Относительно не показа мат-карты - PullRequest
Новая
       22

Относительно не показа мат-карты

0 голосов
/ 17 апреля 2020

Я использовал mat-card, внутри которой я использовал mat-card-title и форму с 4-5 элементами управления, макет mat-card не отображается при развертывании в браузере, но отображается заголовок mat-card, Ive разместил содержимое формы и элементы управления только внутри содержимого mat-card

Вот код шаблона, 

<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>

Вот изображение окна вывода браузера,

enter image description here

Я знаю, что только что допустил небольшую ошибку, я новый ученик, пожалуйста, поправьте меня, Заранее спасибо: -)

1 Ответ

3 голосов
/ 17 апреля 2020

Пожалуйста, попробуйте использовать следующую строку кода. 

<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>
...