angular - 角材料垫输入格式

Question

我使用 Material UI 开发了下面的角形 form2.component.html

<form #personForm="ngForm" (ngSubmit)="submitForm(personForm)" novalidate>

    <div class="container" fxLayout="row wrap" fxLayoutWrap fxLayoutGap = "1px" fxLayoutAlign="flex-start">

        <div fxFlex="0 1 calc(33.3% - 32px)">
            <mat-label> First Name : </mat-label>
            <mat-form-field>
                <input matInput type="text" required maxlength="12" size="12" class="inputbox"
                [(ngModel)]="person.firstName" #firstName="ngModel" name="firstName"
                pattern="[A-Za-z]*"
                />             
            </mat-form-field>
        </div>

        <div fxFlex="0 1 calc(33.3% - 32px)">
            <mat-label> Last Name : </mat-label>
            <mat-form-field>
                <input matInput type="text" required maxlength="12" size="12" class="inputbox" readonly
                [(ngModel)]="person.lastName" #firstName="ngModel" name="lastName"
                pattern="[A-Za-z]*"
                />             
            </mat-form-field>
        </div>

        <div fxFlex="0 1 calc(33.3% - 32px)">
            <mat-label> Middle Initial : </mat-label>
            <mat-form-field>
                <input matInput type="text" required maxlength="1" size="1" class="inputbox"
                [(ngModel)]="person.middleInitial" #firstName="ngModel" name="middleInitial"
                pattern="[A-Za-z]*"
                />            
            </mat-form-field>
        </div>

        <div fxFlex="0 1 calc(33.3% - 32px)">
            <mat-label> Phone No : </mat-label>
            <mat-form-field>
                <input matInput type="text" required maxlength="1" size="1"
                [(ngModel)]="person.phoneNo" #firstName="ngModel" name="phoneNo"
                pattern="[A-Za-z]*"
                />            
            </mat-form-field>
        </div>

        <div fxFlex="0 1 calc(33.3% - 32px)">
            <mat-label> Address Line1 : </mat-label>
            <mat-form-field>
                <input matInput type="text" required maxlength="1" size="1"
                [(ngModel)]="person.addressL1" #firstName="ngModel" name="addressL1"
                pattern="[A-Za-z]*"
                />            
            </mat-form-field>
        </div>

        <div fxFlex="0 1 calc(33.3% - 32px)">
            <mat-label> Address Line2 : </mat-label>
            <mat-form-field>
                <input matInput type="text" required maxlength="1" size="1"
                [(ngModel)]="person.addressL2" #firstName="ngModel" name="addressL2"
                pattern="[A-Za-z]*"
                />            
            </mat-form-field>
        </div>

        <div fxFlex="0 1 calc(33.3% - 32px)">
            <mat-label> City : </mat-label>
            <mat-form-field>
                <input matInput type="text" required maxlength="10" size="10"
                [(ngModel)]="person.city" #firstName="ngModel" name="city"
                pattern="[A-Za-z]*"
                />            
            </mat-form-field>
        </div>

        <div fxFlex="0 1 calc(33.3% - 32px)">
            <mat-label> State : </mat-label>
            <mat-form-field>
                <input matInput type="text" required maxlength="10" size="10"
                [(ngModel)]="person.state" #firstName="ngModel" name="state"
                pattern="[A-Za-z]*"
                />            
            </mat-form-field>
        </div>

        <div fxFlex="0 1 calc(33.3% - 32px)">
            <mat-label> Zip : </mat-label>
            <mat-form-field>
                <input matInput type="text" required maxlength="5" size="5"
                [(ngModel)]="person.zip" #firstName="ngModel" name="zip"
                pattern="[A-Za-z]*"
                />            
            </mat-form-field>
        </div>

        <div fxFlex="0 1 calc(33.3% - 32px)">
            <mat-label> Date of Birth : </mat-label>
            <mat-form-field>
                <input matInput type="text" required maxlength="10" size="10"
                [(ngModel)]="person.dateOfBirth" #firstName="ngModel" name="dateOfBirth"
                pattern="[A-Za-z]*"
                />            
            </mat-form-field>
        </div>

        <div fxFlex="0 1 calc(33.3% - 32px)">
            <mat-label> Eye color :</mat-label>
            <mat-form-field>
                <input matInput type="text" required maxlength="10" size="10"
                [(ngModel)]="person.eyeColor" #firstName="ngModel" name="eyeColor"
                pattern="[A-Za-z]*"
                />            
            </mat-form-field>
        </div>

    </div>

  <div>
    <button type="submit" class="btn-solid">Submit</button>
    <button type="button" (click)="clearForm(personForm)">Reset</button>
  </div>
</form>

CSS如下

.container{
    height: 50hv;
    width: 100%;
    margin-left: 40px;
    margin-bottom: 50px;
}

.inputbox{
    border: 1px solid black;
    width: 53%;
}
::ng-deep .mat-form-field-underline {
    display: none;
}

::ng-deep .mat-form-field-wrapper {
    padding-bottom: 0px;
}

::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
    padding-bottom: 0px;
}

::ng-deep .mat-form-field-infix {
    border-top: 0;
}

我不得不使用 ng-deep 来调整两行之间的间距 另外，我想要文本输入周围的框。不确定这是否是正确的方法。我发现一些信息说 ng-deep 已被弃用并且不推荐？有一个更好的方法吗 ？自定义间距和 matinput 元素

标签： angular