在父组件的表单提交中获取子组件表单值?

时间:2017-05-31 09:46:17

标签: javascript angular typescript output

  

注意:自problem is a little complex以来,代码是为了可读性而抽象的

我们有一个<child-component>组件模板,如下所示:

<select name="someName" #someID ngDefaultControl [(ngModel)]="someModel" (ngModelChange)="onChange(someID.value)">
      <option *ngFor="let a of list" [ngValue]="a.key">{{a.value}}</option>
</select>

ts文件配置为output

@Component({
  moduleId: module.id,
  selector: 'child-component',
  templateUrl: 'child-component.html',
  outputs: ['someChildEvent']
})

export class ChildComponent {
  someChildEvent = new EventEmitter<string>();
  onChange(value) {
    this.someChildEvent.emit(value);
  }
}

我们在<parent-component>中调用了这样的内容:

<form #f="ngForm" (submit)="submit(f)" >
<child-component (childEvent)="childData=$event"></child-component>
<input type="submit" value="submit">
</form>

.ts类似:

export class ParentComponent {
    childData;

    submit(f) {
        //How to access childData here?
    }
}
  • 它是Angular 2中output configuration的正确实现吗?
  • 我们如何从select option <child-component>提交到<parent-component> form submit(f)访问starts = [1422, 1564, 1706, 1848, 1990, 2132, 2274, 2416, 2558, 2700, 2842]; ends = [1562, 1704, 1846, 1988, 2130, 2272, 2414, 2556, 2698, 2840, 2982]; for k = 1:11 ... startRow = starts(k); endRow = ends(k); ... end public function search(Request $request) { if ($user = Sentinel::check()) { $users = User ::where('first_name', 'like', '%' . $request->text . '%') ->where('companies_id', 1) ->orWhere('last_name', 'like', '%' . $request->text . '%') ->limit(2) ->get() ->map(function ($item) { $item['url'] = route('user.single', ['id' => $item->id]); $item['title'] = $item['first_name'] . ' ' . $item['last_name']; $item['type'] = 'User'; return $item; }) ->toArray(); } } 的值WHERE `firstname` LIKE '%?%' AND `company_id` = 1 OR `lastname` LIKE '%?%' 功能?

1 个答案:

答案 0 :(得分:2)

<child-component (childEvent)="childData=$event"></child-component> 

此处的事件名称需要与您的方法名称匹配,因此它应该是:

<child-component (someChildEvent)="childData=$event"></child-component>

如果您想要在选择框中发送所选对象,请将ngValue更改为该对象并相应地更改模型事件:

[ngValue]="a"

(ngModelChange)="onChange($event)"