Question

我有一个父组件，其FormGroup包含多个FormControls。此FormGroup还包含一个自定义子组件，该组件还向其父组FormGroup添加控件。因此，子组件将formControl作为输入。

提交表单时，我想在子组件FormControls值中添加一个国家/地区前缀。因此，该值应使用前缀保存到db，但不会显示给用户。

问题：子组件不知道提交按钮。因此，我无法在提交表单时添加前缀。当用户更改值时，我无法添加前缀，因为用户显然会看到此操作＆＃34;操作＆＃34;。我必须在子组件中添加此前缀。

我的问题是：有没有办法隐藏用户的FormControls值的一部分？像管道或中间件＆＃34;函数我可以添加到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) {
        ...
    }
}

Answer 1

无法解决这个问题，但找到了可接受的解决方法。

只需在父级中创建一个Observable并将其传递给客户端。这样，父母可以在按下提交按钮时通知孩子。

如果有人需要代码，请发表评论。

FormControl隐藏值

1 个答案: