Ember - 如何在其子组件上创建父组件触发器行为

Question

我创建了一个名为form-field-input的通用表单组件,它可以在焦点输出时验证用户输入.

表单字段-input.hbs

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

表单字段-input.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>

我想在用户单击提交时验证每个表单字段输入组件(因此单击提交而不填写任何字段将触发每个所需表单字段组件上的验证错误消息).

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

Answer 1

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

例如,认为一个人对象有两个字段:出生年份和出生国家.您可能想要检查该国家/地区是否存在该国家/地区.(在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}}