如何在AngularDart的Material Input中实现百分比验证及错误消息？

刚好我之前做过类似的需求，给你一步步拆解怎么实现这个功能，AngularDart的Material组件结合表单验证器就能轻松搞定：

1. 先搭好模板结构（用响应式表单更灵活） #

首先在组件的HTML模板里配置material-input，同时利用它的matError插槽自定义错误消息，替换默认的提示：

<form [formGroup]="percentForm">
  <material-input
    formControlName="percent"
    label="百分比"
    type="number"
    suffix="%"
    placeholder="请输入0-100之间的数字"
  >
    <!-- 自定义错误消息的插槽，let-error可以拿到控件的错误对象 -->
    <ng-template matError let-error>
      <span *ngIf="error.required">请填写百分比</span>
      <span *ngIf="error.min">百分比不能小于0%</span>
      <span *ngIf="error.max">百分比不能超过100%</span>
      <span *ngIf="error.number">请输入有效的数字</span>
    </ng-template>
  </material-input>
</form>

这里的suffix="%"用来自动显示百分比符号，不用用户手动输入；type="number"会让浏览器做基础的数字输入校验，同时配合Angular的验证器做范围校验。

2. 在组件类中配置表单与验证规则 #

接下来在Dart代码里初始化响应式表单组，给百分比字段添加验证规则：

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'percent-input-demo',
  templateUrl: 'percent_input_demo.html',
  directives: [
    coreDirectives,
    formDirectives,
    MaterialInputComponent,
  ],
)
class PercentInputDemoComponent {
  final FormGroup percentForm;

  PercentInputDemoComponent() : percentForm = FormGroup({
    'percent': FormControl(
      null,
      // 组合必填、最小值、最大值三个验证器
      Validators.compose([
        Validators.required,
        Validators.min(0),
        Validators.max(100),
      ]),
      // 可选：设置实时验证（默认是失去焦点时验证）
      updateOn: FormControlUpdateOn.change,
    ),
  });
}

这里用Validators.compose把多个验证器组合起来，updateOn: FormControlUpdateOn.change可以让验证在用户每输入一个字符时就触发，实时显示错误消息。

3. 处理特殊场景：支持用户输入带%的内容 #

如果用户习惯直接输入类似50%这样的内容，而不是纯数字，我们可以自定义一个验证器来处理：

// 自定义百分比验证器：支持带%符号的输入
ValidatorFn percentValidator() {
  return (AbstractControl control) {
    if (control.value == null || control.value.toString().trim().isEmpty) {
      return {'required': true};
    }
    // 去掉输入中的%符号并清理空格
    String cleanedValue = control.value.toString().replaceAll('%', '').trim();
    try {
      num value = num.parse(cleanedValue);
      if (value < 0) return {'min': true};
      if (value > 100) return {'max': true};
      // 验证通过返回null
      return null;
    } catch (_) {
      // 解析失败，返回数字无效错误
      return {'number': true};
    }
  };
}

然后把原来的验证器替换成这个自定义的：

FormControl(
  null,
  Validators.compose([
    percentValidator(),
  ]),
)

这样不管用户输入纯数字还是带%的内容，都能正确验证啦。

4. 验证状态的触发逻辑 #

默认情况下，material-input会在以下时机触发验证：

• 控件失去焦点时
• 用户提交表单时
  如果想调整触发时机，除了上面提到的updateOn: FormControlUpdateOn.change，还可以选择updateOn: FormControlUpdateOn.blur（默认）或者updateOn: FormControlUpdateOn.submit。

内容的提问来源于stack exchange，提问作者Muka