如何将标题添加到表单中？

Question

我想将标题添加到表单中，但找不到任何方法，下面是我的代码，最后我给出了图像链接，说明我希望标题如何出现

<div id="forms" class="page-layout simple fullwidth" fxLayout="column">
    <div class="content p-24">
        <div class="mb-24" fxLayout="column" fxLayoutAlign="start" fxLayout.gt-md="row">

            <form class="mat-card mat-elevation-z4 p-24 mr-24" fxLayout="column" fxLayoutAlign="start" fxFlex="1 0 auto" name="form" [formGroup]="form">
                <!-- <mat-card>New sales person</mat-card> -->
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>ID</mat-label>
                        <input matInput formControlName="company">
                        <mat-icon matSuffix>domain</mat-icon>
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Name</mat-label>
                        <input matInput formControlName="firstName" required>
                        <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                        <mat-error> Name is required!</mat-error>
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Gender</mat-label>
                        <mat-select>
                            <mat-option>
                                Male
                            </mat-option>
                            <mat-option>
                                Female
                            </mat-option>
                            <mat-option>
                                Rather Not to say.
                            </mat-option>
                        </mat-select>
                    </mat-form-field>

                </div>


                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <input type='number' matInput name="" id="" placeholder="Phone">
                        <mat-icon matSuffix>phone</mat-icon>
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <input type='email' matInput name="" id="" placeholder="Email">
                        <mat-icon matSuffix>email</mat-icon>
                    </mat-form-field>

                </div>


                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <input type='text' matInput name="" id="" placeholder="Team">
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <input type='text' matInput name="" id="" placeholder="Team Leader">
                    </mat-form-field>

                </div>





                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>County</mat-label>
                        <mat-select>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                        </mat-select>
                    </mat-form-field>



                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Sub County</mat-label>
                        <mat-select>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                        </mat-select>
                    </mat-form-field>


                </div>




                <div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100">
                        <mat-label>Physical Address</mat-label>
                        <textarea matInput formControlName="address" required>

                        </textarea>
                        <mat-error>Address is required!</mat-error>
                    </mat-form-field>

                    <mat-form-field appearance="outline" fxFlex="100">
                        <mat-label>Additional Information </mat-label>
                        <textarea matInput formControlName="address2"></textarea>
                        <mat-error>Additional is required!</mat-error>
                    </mat-form-field>

                </div>


                <!-- 
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100">
                        <mat-label>Country</mat-label>
                        <mat-select formControlName="country" required>
                            <mat-option [value]="'United States of America'">
                                United States of America
                            </mat-option>
                            <mat-option [value]="'United Kingdom'">
                                United Kingdom
                            </mat-option>
                            <mat-option [value]="'Russia'">
                                Russia
                            </mat-option>
                            <mat-option [value]="'China'">
                                China
                            </mat-option>
                            <mat-option [value]="'Japan'">
                                Japan
                            </mat-option>
                            <mat-option [value]="'Turkey'">
                                Turkey
                            </mat-option>
                        </mat-select>
                        <mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>
                        <mat-error>Country is required!</mat-error>
                    </mat-form-field>

                </div> -->
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">




                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Input 1</mat-label>
                        <input matInput formControlName="Input1" required>
                        <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                        <mat-error> Input 1 is required!</mat-error>
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Input 2</mat-label>
                        <input matInput formControlName="Input2" required>
                        <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                        <mat-error> Input 1 is required!</mat-error>
                    </mat-form-field>



                </div>



                <button mat-raised-button class='submitButton' style="background-color: #27803f;  color: white;">Submit
                    form</button>
            </form>
        </div>
    </div>
</div>

我想在表格上加上的标题如下：

​

​

我的表格是这样的：

​

​

我试过放牌，但没成功

Answer 1

这里我为您的愿望编辑了mat-card：https://stackblitz.com/edit/angular-qvnzza

Answer 2

我假设您只想添加一个带有CSS的标题。您可以使用这个CSS来完成这个任务：

#forms:before {
    content: 'This is your heading';
    background: #00398e;
    width: 100%;
    display: block;
    padding: 10px 20px;
    color: white;
    font-family: Arial;
    font-size: 26px;
}

或者试试这个：

form.mat-card.mat-elevation-z4:before {
    content: 'This is your heading';
    background: #00398e;
    width: 100%;
    display: block;
    padding: 10px 20px;
    color: white;
    font-family: Arial;
    font-size: 26px;
}

或者，如果您想将它添加到您的HTML中，也许可以使用md-toolbar

<md-card>
  <md-toolbar color="primary">
    <span>Title</span>
  </md-toolbar>

或者这个：

   <md-card-header>
      <md-card-title>Your title goes here</mat-card-title>
   </md-card-header>

https://material.angularjs.org/latest/api/directive/mdCard