首页 文章

角度形式与材料

提问于
浏览 次
1

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

但也有一些他无法修改的领域（比如他的名字） . 对于这种情况，我不知道使用什么元素 . 我想与Material设计兼容，但我找不到任何东西 .

这是我的代码：

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

有什么想做点好事吗？

谢谢

javascript html angular forms angular-material

3 回答

  • 1

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

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

    要么：

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

    除标准外，材料没有为残疾人定义任何特殊的东西 . 当然，将这些禁用/只读输入放在 <mat-form-field> 中以包装材质样式 .

    回复于
  • 0

    我的表格看起来有点不同 . 我没有看到你的直接问题，但我怀疑问题是你有两个表单字段而不是一个 . 你可以在我的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>
    回复于
  • 0

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

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

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

    回复于

相关问题