如何清除Inquirer.js中的错误输入

时间:2020-07-08 16:06:31

标签: javascript command-line-interface inquirer inquirerjs

const inquirer = require("inquirer")

var questions = [
  {
    type: "number",
    name: "name",
    message: "Please the number of players",
    validate: function (name) {
      var valid = Number.isInteger(name)
      return valid || `Please enter a valid whole number`
    },
  },
]

function promptUser() {
  inquirer
    .prompt(questions)
    .then((answers) => {
      console.log(`You entered ${answers["name"]}!`)
    })
    .catch((error) => console.log(`Please enter a number`))
}

promptUser()

考虑到上面的代码,在this之类的较早的视频中我注意到,如果您包含validate并失败,则输入将被清除。但是,就我而言,我得到的NaN不会自动清除。假设我启动应用程序并输入“ abcdefg”:

? Please the number of players NaN
>> Please enter a valid whole number

如果我输入任何内容,它将被添加到NaN的末尾。 Backspace和delete不会删除NaN,但是如果我按几次向上箭头按钮直到不再显示以前的输入,它将被删除。我做错什么了吗?

2 个答案:

答案 0 :(得分:1)

这很烦人,因为它不会清除输入,并且输入也由于某种原因被阻塞。我解决此问题的方法是使用一个验证函数,该验证函数也实现了filter函数:

const validateNumbers = moreValidationChecks => ({
    validate: input => {
        if (input === '') {
            return 'Please provide a valid number greater then 0'
        }
        return moreValidationChecks ? moreValidationChecks(input) : true
    },
    filter: input => {
        // clear the invalid input
        return Number.isNaN(input) || Number(input) <= 0 ? '' : Number(input)
    },
})

之后,只需将其添加到您想要的查询中即可:

return inquirer.prompt([
    {
        name: 'amount',
        message: 'Type a number please',
        type: 'number',
        ...validateNumbers(),
    },
])

您还可以对此进行附加验证:

   return inquirer.prompt([
        {
            name: 'amount',
            message: 'Type a number please',
            type: 'number',
            ...validateNumbers(input => {
                if (Number(input) < 10)) {
                    return "This must be less then 10"
                }
                return true
            }),
        },
    ])

但是,每当您传递一个引发验证错误的有效数字时,我仍然会卡住,但仍然无法删除。您需要输入一些文本,然后将其删除,因为这将使其变为NaN

答案 1 :(得分:0)

我发现将类型从数字更改为输入可以解决问题。这是我使用的提示示例。

{
    type: "input",
    message: "Please enter id:",
    name: "id",
    validate: (answer) => {
      if (isNaN(answer)) {
        return "please enter a number";
      }
      return true;
    },
  },
相关问题