在 Angular 中，如何在材质对话框模板中使用自定义验证器

问题描述

我在材质对话框中有一个数据输入表单作为模板表单。我想将一些自定义验证器应用于其某些输入字段。 我没有成功让它们着火（尽管我测试了一个并且它适用于另一种“正常”形式）。 尝试在弹出的材质对话框表单中使用它们是否存在问题？它是一个非启动器吗？

假设一切正常 - 为什么它不起作用？

谢谢。

difftool

模板的主要部分；

man gitconfig

解决方法

不要在表单内使用对话框。

phone

在对话框中使用表单。

import React from "react";
import { useForm,Controller } from "react-hook-form";
import PhoneInput,{ isValidPhoneNumber } from "react-phone-number-input";

import "react-phone-number-input/style.css";

const MyForm = () => {
  const {
    handleSubmit,formState: { errors },control
  } = useForm();


  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="user-info-form">
      <div>
        <label htmlFor="phone-input">Phone Number</label>
        <Controller
          name="phone-input"
          control={control}
          rules={{
            validate: (value) => isValidPhoneNumber(value)
          }}
          render={({ field: { onChange,value } }) => (
            <PhoneInput
              value={value}
              onChange={onChange}
              defaultCountry="TH"
              id="phone-input"
            />
          )}
        />
        {errors["phone-input"] && (
          <p className="error-message">Invalid Phone</p>
        )}
      </div>
    </form>
  );
};

export default MyForm;