带材质的角形

Question

我正在尝试使用 Angular Material 构建一个表单。此表格使客户能够修改他的个人数据（带有输入字段）。对于这种情况，我使用“mat-form-field”组件

但也有一些他不能修改的字段（比如他的名字）。对于这种情况，我不知道要使用什么元素。我想要一些与 Material design 兼容的东西，但我找不到。

这是我的代码：

<form [formGroup]="form" (ngSubmit)="onSubmit()" fxLayout="column"fxLayoutAlign="center center">

    <mat-form-field>
        <label for="">First Name :</label> // THIS THE PART THAT CAUSES PROBLEM
        <span matInput>Peter</span>
    </mat-form-field>

    <mat-form-field>
      <input type="email" matInput placeholder="your email" formControlName="email" >
   </mat-form-field>

    <button mat-raised-button type="submit">Submit</button>
  </form>

有什么好主意吗？

谢谢

Answer 1

修改或不修改的可能性是一个字段属性，只有数据类型定义了您需要使用的元素的选择。所以，在 first name 的例子中，正如你所说，选择是输入文本，只需要设置 disabled 或 readonly 属性，你可以在以下选项中进行选择：

<input type="text" disabled="disabled" />

或者：

<input type="text" readonly="readonly" />

Material 没有为超出标准规定的禁用定义任何特殊的东西。当然，将这些禁用/只读输入放在 <mat-form-field> 中以包装材质样式。

Answer 2

我的表格看起来有点不同。我没有看到您的直接问题，但我怀疑问题是您有两个表单字段而不是一个。你可以在我的 Stackblitz for Mat Table 上玩这个：Mat Table Stackbliz

那里有很多有用的东西。

      <li>
        <label class="label-pad">First name: </label>
        <mat-form-field class="inputBackground">
          <input matInput #firstName maxlength="30" class="inputField" type="text" id="first_name"
                 formControlName="first_name" [errorStateMatcher]="matcher" required>
          <mat-hint align="end">{{firstName.value?.length || 0}}/30</mat-hint>
          <mat-error>{{ errors.required }}</mat-error>
        </mat-form-field>
      </li>

Answer 3

对于响应式表单，您必须在组件中禁用名称 formcontrol，如下所示：

this.form = this.fb.group({name:[{value:'nameValue',disabled:true}]})

只是 this.form.value.name 不起作用。您必须使用 this.form.getRawValue() 才能包含名称值。名称不应该是这种方式的表单字段。您可以将其显示为字符串。