我如何正确使用mat-form-field获取输入值(已更新)

时间:2019-05-09 11:32:17

标签: angular angular-reactive-forms

link referring the error with textbox above the floating line 我是mat-form-field的新手。我试图通过使用mat-form-field对我的表单进行测试来探索它。使用mat库时,出现文本框边框。这很不寻常

我尝试使用mat-form-field,然后输入标签,但仍然出现边框

<div fxFlex="120px">
     <label class="studentName">Student Name</label><sup class="red- 
             color">*</sup>
</div>
        <!--<div fxFlex="calc(100% - 135px)" fxLayout="column" >-->
<mat-form-field class="fullWidth">
      <input matInput formControlName="studentName"
             id="studentName"
             name="studentName"
             required>
            <!--<app-error-message [control]="form.controls.studentName"></app-error-message>-->
 </mat-form-field>

我不应该出现文本框,它变成一个边框。

我期望这样的东西:https://stackblitz.com/angular/mnrjgnnqmqv?file=app%2Fform-field-overview-example.ts

我的Css文件如下:

.alignment .mat-form-field-outline-start,
.alignment .mat-form-field-outline-end {
  border-radius: 0px !important;
}

2 个答案:

答案 0 :(得分:0)

<mat-form-field class="fullWidth">
    <input matInput placeholder="Student Name" [(ngModel)]='variableName' required>
</mat-form-field>

答案 1 :(得分:0)

  

如果找不到覆盖输入的CSS,请添加此CSS

mat-form-field.mat-form-field input {
    border: none !important;
}