angular - 使用 Angular 7 以反应形式使用自定义选择组件
问题描述
Submit
单击按钮时我没有获得价值。以下是我到目前为止所尝试的。
自定义组件 HTML-
<div class="form-group custom-input-overlap">
<select class="form-control custom-select" (change)="change($event)" [ngClass]="{'filledTxt': selectedItem.length > 0}">
<option value="" selected disabled>{{labelStr}}</option>
<option *ngFor="let item of titleData" [value]="item.lovId.lovId" [selected]="item.lovId.lovId == selectedItem" >{{ item.lovValue }}</option>
</select>
<label for="labelStr" style="left:25px;">{{labelStr}}</label>
</div>
自定义组件 TS 文件
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-custom-select',
templateUrl: './custom-select.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomSelectComponent),
multi: true
}
]
})
export class CustomSelectComponent implements ControlValueAccessor {
selectedItems = [];
@Input() labelStr:string;
@Input() groupID:string;
@Input() selectedItem:string;
private propagateOnChange = (value: {lovId, lovValue}[]) => {};
private propagateTouched = (value: {lovId, lovValue}[]) => {};
titleData = [
{
"lovId":{"lang":"EN","lovId":"1"},
"lovValue":"Mr"
},
{
"lovId":{"lang":"EN","lovId":"2"},
"lovValue":"Mrs"
},
{
"lovId":{"lang":"EN","lovId":"3"},
"lovValue":"Dr"
},
{
"lovId":{"lang":"EN","lovId":"5"},
"lovValue":"Miss"
}
]
constructor(
private cdRef: ChangeDetectorRef
) {
console.log("seletced Item = "+this.selectedItem+" groupID = "+this.groupID)
}
writeValue(items: {lovId, lovValue}[]) {
this.selectedItems = items;
}
registerOnChange(fn) {
this.propagateOnChange = fn;
}
registerOnTouched(fn) {
this.propagateTouched = fn;
}
change(e) {
this.selectedItem = e.target.options[e.target.options.selectedIndex].value;
console.log("selected Item = "+this.selectedItem)
}
}
反应形式中使用的组件
<form [formGroup]="ccnForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-md-5 offset-md-1">
<app-custom-select formControlName="projectType" labelStr="Project type" groupID="CM_GENDER" selectedItem="3" ></app-custom-select>
</div>
</div>
</form>
反应式 TS 文件
import { Component, OnInit } from '@angular/core'; import { FormGroup, FormBuilder, AbstractControl, Validators } from '@angular/forms';
@Component({ selector: 'app-ccn-request', templateUrl: './ccn-request.component.html', styleUrls: ['./ccn-request.component.css'] }) export class CcnRequestComponent {
ccnForm: FormGroup;
constructor(
private fb: FormBuilder ) {
this.ccnForm = this.fb.group({
projectType: ['', (c: AbstractControl) => {
return c.value && c.value.length && c.value.length > 1 ? null : { test: true }
}]
});
this.ccnForm.valueChanges.subscribe(console.log); }
get ccnFormControl(){ return this.ccnForm.controls; }
onSubmit(){
console.log("Project Name = "+this.ccnFormControl.projectType.value) }
}
如何在Submit
按钮中获取自定义组件值的值Angular Reactive Form
?
解决方案
在您的子组件中
change(e) {
this.selectedItem = e.target.options[e.target.options.selectedIndex].value;
console.log("selected Item = "+this.selectedItem)
this.propagateOnChange({selectedItem: this.selectedItem});
}
在您的父母中,只需ngOnInit订阅您的表单
this.ccnForm.controls.projectType.valueChanges
.subscribe(selectedItem => {
// Do something here with your selected item
this.selectedItem = selectedItem;
});
推荐阅读
- sql - ORA-06512 创建触发器时
- ios - iPhone 11 模拟器上的背景图片大小不合适
- javascript - 将多个计算字段中的信息提取到一个总和中以显示在单个字段中
- python - LSTM 层不接受 CNN 层输出的输入形状
- javascript - 如何使用nodemailer将图像附件作为base64发送?
- php - 自动构建 laravel 分页对象
- javascript - 如何为函数参数分配提示值
- python - #Pandas,根据另一列的标题名称(列名)向列添加值
- typescript - 使接口可选?
- google-apps-script - 如何使用 OnSubmit 触发器在谷歌电子表格上运行函数?