FormControl 값의 부분을 숨기기

Question

여러 FormControl을 포함하는 FormGroup이있는 상위 구성 요소가 있습니다. 이 FormGroup에는 또한 해당 부모 FormGroup에 컨트롤을 추가로 추가하는 사용자 정의 하위 구성 요소가 들어 있습니다. 따라서 자식 구성 요소는 formControl을 입력으로 가져옵니다.

양식을 제출하면 자식 구성 요소 FormControls 값에 국가 접두사를 추가하고 싶습니다. 따라서 값은 접두사가있는 db에 저장해야하지만 사용자에게 표시되지 않습니다.

문제 : 하위 구성 요소는 제출 단추에 대해 알지 못합니다. 그래서 양식을 제출할 때 단순히 접두어를 추가 할 수는 없습니다. 그리고 사용자가이 "조작"을 분명히 볼 수 있기 때문에 사용자가 값을 변경할 때 접두사를 추가 할 수 없습니다. 그리고이 접두사를 자식 구성 요소에 추가해야합니다.

내 질문 : 사용자로부터 FormControls 값의 일부를 숨기는 방법이 있습니까? 파이프 또는 "미들웨어"와 같은 것 - FormControl에 사용자가 무엇을 보여줄지 결정할 수있는 함수가 있습니까?

// 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

정말이 문제를 해결 할 수 없습니다 만, 수용 가능한 해결 방법을 발견

// 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"); 

    } 
} 

구성 요소는이 구성 요소에 사용됩니다.

상위에 Observable을 작성하고이를 클라이언트에 전달하십시오. 이렇게하면 부모는 제출 버튼을 눌렀을 때 자식에게 알릴 수 있습니다.

누군가 코드가 필요한 경우 댓글을 달아주세요.