为什么“清除”按钮未在 mat-form-field 输入上呈现？

Question

我有以下输出，我可以看到 HTML 被呈现为字符串而不是被评估。

我需要检查的是，当文本框中存在输入内容时，它应该在文本框末尾给我一个“清除”标志，以清除值，而不是允许我输入输入。

我不知道我做错了什么。

以下是HTML代码：

<mat-card class="example-card">
  <form [formGroup]="form" (ngSubmit)="submit()">
    <mat-card-header>

    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title-group>
    <mat-card-title> Qoniac Currency Conversions </mat-card-title>
    <mat-card-subtitle>Please enter amount in dollar currency. (e.g. 4578,88 or 7578. 
                Cents supported range (0-99) and dollar supported range (0-999 999 999) )</mat-card-subtitle>
                
    </mat-card-title-group>
    </mat-card-header>
    <mat-divider></mat-divider>
    <mat-card-content class="justifyMatContent">      
      <mat-form-field class="example-full-width" appearance="outline">
        <mat-label>Amount</mat-label>
        <input matInput placeholder="Enter amount" formControlName="currency">
        
        @if (form.currency) {{ 
          <button matSuffix mat-icon-button aria-label="Clear" (click)="form.get('currency')?.setValue('')">
            <mat-icon>close</mat-icon>
          </button>
        }}

        <mat-error *ngIf="form.get('currency')?.hasError('pattern')">
          input amount must be in currency format(e.g. 4545,15  or 45789. Supported dollar range (0-999 999 999 ) and cents range (0-99))
        </mat-error>
      </mat-form-field>
      
      <mat-card class="justifyInnerMatContent">
        <mat-card-content>Simple card</mat-card-content>
      </mat-card>
        <div class="mat-elevation-z8">                    
        </div>
    </mat-card-content>    
    <mat-card-actions>    
      <button mat-raised-button color="accent" style="width: 100%">Convert to English Words</button>
    </mat-card-actions>
  </form>
</mat-card>`

以下是 Typescript 代码：

import { Component } from '@angular/core';
  
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app-material2';
  
  currencyValue : string = "";
  
  form: FormGroup = new FormGroup({});
   
  constructor(private fb: FormBuilder) {
  
    this.form = fb.group({
      currency: ['', [Validators.pattern(/^\d+(,(0?\d|[0-9][0-9]))?$/)]],
    })
  }
    
  get f(){
    return this.form.controls;
  }
   
  submit(){
    console.log(this.form.value);
  }
}

我需要实现

ValueAccessorControl

接口吗？请注意，我只有一个控件，而不是一组控件。但我所看到的大多数验证都是以小组方式完成的。

搜索过，但没有得到与我的问题相同的信息。

Answer 1

1. 您的

   @if()

   语法不正确，应该使用单括号

   {}

   ，而不是双括号

   {{}}

   。请注意，

   @if

   仅适用于 Angular 17。

2. 如果您想在

   currency

   控件有值时显示按钮，则应使用

   form.controls["currency"].value

   。

@if (form.controls["currency"].value) {
    <button
      matSuffix
      mat-icon-button
      aria-label="Clear"
      (click)="form.get('currency')?.setValue('')"
    >
      <mat-icon>close</mat-icon>
    </button>
}

或者使用

*ngIf

指令：

<button *ngIf="form.controls['currency'].value"
  matSuffix
  mat-icon-button
  aria-label="Clear"
  (click)="form.get('currency')?.setValue('')"
>
  <mat-icon>close</mat-icon>
</button>

3. 请注意，您当前的字段允许输入字母，若要限制仅输入数字值，则需要

   type="number"

   属性。

<input
    matInput
    placeholder="Enter amount"
    formControlName="currency"
    type="number"
/>

演示@StackBlitz