如何在角度9中使用Validator.pattern

问题描述

const Todo = ({ todos,deletetodo,onChangeCheckBox }) => {
  const todoList = todos.length ? (
    todos
      .filter(({ status }) => status !== "deleted")
      .map((todo) => {
        return (
          <div key={todo.id}>
            <div>
              <input
                type="checkBox"
                checked={todo.status === "done"}
                onChange={(event) =>
                  onChangeCheckBox(todo.id,event.target.checked)
                }
              />
              <p
                style={
                  todo.status === "pending"
                    ? { color: "red" }
                    : { color: "green",textdecoration: "line-through" }
                }
              >
                {todo.content}
              </p>
              <button onClick={() => deletetodo(todo.id)}>Delete</button>
            </div>
            <hr />
          </div>
        );
      })
  ) : (
    <p>You have no todos</p>
  );
  return <div>{todoList}</div>;
};

嗨，我使用Angular 9 如何设置仅包含小数的模式？ 像下面的数字一样。

BGroup = new FormGroup({
  test: new FormControl(null,[Validators.required,Validators.pattern("[0-9]*$")])
});

最大数量= 20

最小数量= 0

解决方法

以下作品

constructor (private fb: FormBuilder) { }
pattern = '[0-9]+(\\.)?[0-9]*'
  BGroup = this.fb.group({    
    test: [null,[
      Validators.required,Validators.pattern(this.pattern),Validators.min(0),Validators.max(20)
      ]
    ],});

我创建了一个Stackblitz Demo

,

尝试：

BGroup = new FormGroup({    
    test: new FormControl(null,[Validators.required,Validators.pattern('^\\d*\\.?\\d*$'),Validators.max(20)])
});