我有一个父组件与FormGroup包含几个FormControls . 此FormGroup还包含一个自定义子组件，该组件还向其父组FormGroup添加控件 . 因此，子组件将formControl作为输入 .
提交表单时，我想在子组件FormControls值中添加一个国家/地区前缀 . 因此，该值应该使用前缀保存到db，但不会显示给用户 .
问题：子组件不知道提交按钮 . 所以我不能简单地在提交表单时添加前缀 . 当用户更改值时，我无法添加前缀，因为用户显然会看到这种“操纵” . 我必须在子组件中添加此前缀 .
My question is: 有没有办法隐藏用户的FormControls值的一部分？像管道或"middleware"功能我可以添加到FormControl来决定，向用户显示什么？
// CHILD COMPONENT
@Component({
selector: 'app-my-comp',
template: '<input [formControl]="inputField">'
})
export class MyComp {
@Input() someFormGroup: FormGroup;
inputField: AbstractControl;
constructor(private formBuilder: FormBuilder) {
this.inputField = formBuilder.control("", Validators.required);
this.someFormGroup.addControl(this.inputField);
//Here I'd like to add a prefix to the formControls value
this.inputField.setValue("ABC"); //but the user would see this
//what I really would like to do:
this.inputField.setHiddenPrefix("ABC");
}
}
该组件用于此组件：
// PARENT COMPONENT
@Component({
selector: 'app-parent-comp',
template: '<form [formGroup]="someFormGroup">
<input [formControl]="someInputField"'
<app-my-comp [someFormGroup]="someFormGroup"></app-my-comp>
</form>
})
export class MyComp {
someFormGroup: FormGroup;
someInputField: AbstractControl;
constructor(private formBuilder: FormBuilder) {
...
}
}
1 回答
无法真正解决这个问题，但找到了一个可接受的解决方法 .
只需在父级中创建一个Observable并将其传递给客户端 . 这样，父母可以在按下提交按钮时通知孩子 .
如果有人需要代码，请发表评论 .