Angular 将FormControl以角度8传递给外部FormBuilder
我们正在创建一个角度材料选择包装。如何将FormControl从内部构件(材质下拉选择)传递到外部父构件Formbuilder?试图找出语法,如果可能的话,不要使用ControlValueAccessor 子材质下拉列表选择:Angular 将FormControl以角度8传递给外部FormBuilder,angular,typescript,angular8,angular-reactive-forms,Angular,Typescript,Angular8,Angular Reactive Forms,我们正在创建一个角度材料选择包装。如何将FormControl从内部构件(材质下拉选择)传递到外部父构件Formbuilder?试图找出语法,如果可能的话,不要使用ControlValueAccessor 子材质下拉列表选择: @Input() formControlnput = new FormControl('',[Validators.min(1)]]) this.outerForm = this.formBuilder.group({ 'customerName':[null,[V
@Input() formControlnput = new FormControl('',[Validators.min(1)]])
this.outerForm = this.formBuilder.group({
'customerName':[null,[Validators.maxLength(50)]],
'customerPhone': [null, [Validators.maxLength(15)]],
'formControlInput': [null,[Validators.required]], // <--- Need this from inner component
TS:
@Input() formControlnput = new FormControl('',[Validators.min(1)]])
this.outerForm = this.formBuilder.group({
'customerName':[null,[Validators.maxLength(50)]],
'customerPhone': [null, [Validators.maxLength(15)]],
'formControlInput': [null,[Validators.required]], // <--- Need this from inner component
HTML:
<div class="dropdown-cont">
<mat-form-field appearance="outline">
<mat-label>{{label}}</mat-label>
<mat-select
[formControl]="formControlInput" // See here
[(ngModel)]="selectedItem"
(selectionChange)="selectedItemChanged($event)"
>
<mat-option [value]="defaultItem[txtValue]">{{defaultItem[txtField]}}</mat-option>
<mat-option
*ngFor="let item of listItems"
[value]="item[txtValue]"
>
{{item[txtField]}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
{{label}}
{{defaultItem[txtField]}
{{item[txtField]}
父组件:
@Input() formControlnput = new FormControl('',[Validators.min(1)]])
this.outerForm = this.formBuilder.group({
'customerName':[null,[Validators.maxLength(50)]],
'customerPhone': [null, [Validators.maxLength(15)]],
'formControlInput': [null,[Validators.required]], // <--- Need this from inner component
this.outerForm=this.formBuilder.group({
“customerName:[null,[Validators.maxLength(50)],
“customerPhone”:[null,[Validators.maxLength(15)],
“formControlInput”:[null,[Validators.required]],//您可以使用@Output()
和EventEmitter
,只需在子组件ngOnInit()中使用emit(formControl)
方法。正确的构建方法是使用ValueControlAccessor。如果您不想处理所有样板文件,可以使用ngx子表单为您处理:)我们试图避免ValueControlAccessor,因为我们在长时间内对材料下拉列表进行双重包装term@Artportraitdesign1看看这个答案,为什么要避免ValueControlAccessor?在表单控件上制作包装应该使用IMOhi@Abhishek,因为我的表单与另一个父表单混合,所以您可以编辑答案有自己的东西,谢谢,我们仍然需要看到它链接到外部FormBuilder。我不清楚您想要什么。再次查看我的示例,这里有一个ngAfterViewChecked()
在此处可以看到输入时更新的表单值。父组件中是否可以有一个Formbuilder?并使子组件附加到父Formbuilder控件,请参阅我的问题示例再次感谢查看示例,我不确定您想要什么,但我想这是: