Angular Material表单输入混乱了

huangapple go评论79阅读模式
英文:

Angular Material Form Input messed up

问题

我的表单框出现问题:

我从Material的网站上复制了完全相同的代码:

<mat-form-field appearance="fill" floatLabel="always">
    <mat-label>最低价格</mat-label>
    <input matInput type="number" class="example-right-align" placeholder="0" name="minPrice" [(ngModel)]="userParams.minPrice">
    <span matTextPrefix>$&nbsp;</span>
    <span matTextSuffix>.00</span>
</mat-form-field>

<mat-form-field appearance="fill" floatLabel="always">
    <mat-label>最高价格</mat-label>
    <input matInput type="number" class="example-right-align" placeholder="0" name="maxPrice" [(ngModel)]="userParams.maxPrice">
    <span matTextPrefix>$&nbsp;</span>
    <span matTextSuffix>.00</span>
</mat-form-field>

官方网站上的示例显示应该如下所示:
Angular Material表单输入混乱了

英文:

My Form boxes are messed up:
Angular Material表单输入混乱了

I copied the exact code from Material's site:

 &lt;mat-form-field appearance=&quot;fill&quot; floatLabel=&quot;always&quot;&gt;
        &lt;mat-label&gt;Min Price&lt;/mat-label&gt;
        &lt;input matInput type=&quot;number&quot; class=&quot;example-right-align&quot; placeholder=&quot;0&quot; name=&quot;minPrice&quot; [(ngModel)]=&quot;userParams.minPrice&quot;&gt;
        &lt;span matTextPrefix&gt;$&amp;nbsp;&lt;/span&gt;
        &lt;span matTextSuffix&gt;.00&lt;/span&gt;
      &lt;/mat-form-field&gt;

      &lt;mat-form-field appearance=&quot;fill&quot; floatLabel=&quot;always&quot;&gt;
        &lt;mat-label&gt;Max Price&lt;/mat-label&gt;
        &lt;input matInput type=&quot;number&quot; class=&quot;example-right-align&quot; placeholder=&quot;0&quot; name=&quot;maxPrice&quot; [(ngModel)]=&quot;userParams.maxPrice&quot;&gt;
        &lt;span matTextPrefix&gt;$&amp;nbsp;&lt;/span&gt;
        &lt;span matTextSuffix&gt;.00&lt;/span&gt;
      &lt;/mat-form-field&gt;

The example on the official website shows that it should look like this: Angular Material表单输入混乱了

答案1

得分: 1

问题出在您的matTextPrefixmatTextSuffix。尝试这样做:

<mat-form-field appearance="fill" floatLabel="always">
    <mat-label>最低价格</mat-label>
    <input matInput type="number" class="example-right-align" placeholder="0" name="minPrice" [(ngModel)]="userParams.minPrice">
    <span matPrefix>$&nbsp;</span>
    <span matSuffix>.00</span>
</mat-form-field>

<mat-form-field appearance="fill" floatLabel="always">
    <mat-label>最高价格</mat-label>
    <input matInput type="number" class="example-right-align" placeholder="0" name="maxPrice" [(ngModel)]="userParams.maxPrice">
    <span matPrefix>$&nbsp;</span>
    <span matSuffix>.00</span>
</mat-form-field>

这里是我得到代码的屏幕截图:
Angular Material表单输入混乱了

英文:

The problem is with your matTextPrefix and matTextSuffix. Try this:

 &lt;mat-form-field appearance=&quot;fill&quot; floatLabel=&quot;always&quot;&gt;
        &lt;mat-label&gt;Min Price&lt;/mat-label&gt;
        &lt;input matInput type=&quot;number&quot; class=&quot;example-right-align&quot; placeholder=&quot;0&quot; name=&quot;minPrice&quot; [(ngModel)]=&quot;userParams.minPrice&quot;&gt;
        &lt;span matPrefix&gt;$&amp;nbsp;&lt;/span&gt;
        &lt;span matSuffix&gt;.00&lt;/span&gt;
      &lt;/mat-form-field&gt;

      &lt;mat-form-field appearance=&quot;fill&quot; floatLabel=&quot;always&quot;&gt;
        &lt;mat-label&gt;Max Price&lt;/mat-label&gt;
        &lt;input matInput type=&quot;number&quot; class=&quot;example-right-align&quot; placeholder=&quot;0&quot; name=&quot;maxPrice&quot; [(ngModel)]=&quot;userParams.maxPrice&quot;&gt;
        &lt;span matPrefix&gt;$&amp;nbsp;&lt;/span&gt;
        &lt;span matSuffix&gt;.00&lt;/span&gt;
      &lt;/mat-form-field&gt;

Here is a screenshot of where I got the code:
Angular Material表单输入混乱了

huangapple
  • 本文由 发表于 2023年2月19日 14:36:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/75498422.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定