javascript - Ember - 如何使父组件触发其子组件的行为

Question

我已经创建了一个名为 form-field-input 的通用表单组件，它可以在聚焦时验证用户输入。

表单字段输入.hbs

<label>{{label}}</label>
{{input 
 placeholder=label 
 value=value 
 focus-out='validate' 	
 required=required 
 type=type
}}
<p>{{errorMessage}}</p>

表单字段输入.js

actions: {
  validate: function() {
    var type = this.get('type');
    this.set('checked', true);
    if (this.get('required')) {
      if (this.get('value') === '') {
        this.set('invalid', true);
        this.set('valid', false);
        this.set('errorMessage', 'This field cannot be blank');
        return
      }
    }
    if (type === 'Email') {
      this.send('validateEmail');
    }
    ...
  },
}

如果我将组件的多个实例放入一个表单中(如下所示)，当用户将注意力集中在每个输入上时，验证会完美地进行。

<form {{action "login" on="submit"}}>
    {{form-field-input label='Email' value=email type='Email' required=true }} 
    {{form-field-input label='Password' value=password type='Password' required=true}} 
    {{input type="submit" value="Log In"}}
</form>

我想在用户点击提交时验证每个 form-field-input 组件(因此点击提交而不填写任何字段会触发每个必需的表单字段组件上的验证错误消息) .

这是否可以实现，还是我需要将验证代码放入父组件中？

Answer 1

表单由一些不同的输入字段组成。每个输入字段都与数据(比如模型)的一个或多个属性相关。表单反射(reflect)了该模型。模型的验证需要具有完整性。因此，您不仅应该检查该模型的字段，还应该检查整个模型本身。

例如，假设一个人对象有两个字段:出生年份和出生国家。您可能想检查那个国家在那一年是否存在。 (在 1970 年还没有名称为哈萨克斯坦的国家。)您无法通过仅验证单个字段来验证这一点。

因此，在我看来，您应该对代表有意义模型的父组件进行验证。因此，您应该将验证数据传递给子组件。

示例伪代码:

{{#form-component validationRules=validationRules as |f|}}
   {{f.date-input value=(readonly birthDate) propertyName='birthDate'}}
   {{f.text-input value=(readonly birthCountry) propertyName='birthCountry'}}
{{/form-component}}