Ich habe eine übergeordnete Komponente mit einer FormGroup, die mehrere FormControls enthält. Diese FormGroup enthält auch eine benutzerdefinierte untergeordnete Komponente, die der übergeordneten FormGroup zusätzliche Steuerelemente hinzufügt. Daher erhält die untergeordnete Komponente das formControl als Eingabe.FormControl Teil des Werts ausblenden
Wenn das Formular abgeschickt wird, möchte ich dem FormControls-Wert der untergeordneten Komponente ein Länderpräfix hinzufügen. Daher sollte der Wert in db mit dem Präfix gespeichert werden, aber ohne den Benutzer angezeigt werden.
Das Problem: Die untergeordnete Komponente weiß nicht über die Schaltfläche Senden. Daher kann ich das Präfix nicht einfach hinzufügen, wenn das Formular abgeschickt wird. Und ich kann das Präfix nicht hinzufügen, wenn der Benutzer den Wert ändert, weil der Benutzer diese "Manipulation" offensichtlich sehen würde. Und ich muss dieses Präfix in der Kindkomponente hinzufügen.
Meine Frage ist: Gibt es eine Möglichkeit, einen Teil des FormControls-Werts vom Benutzer zu verbergen? Etwas wie Pipe oder eine "Middleware" -Funktion, die ich dem FormControl hinzufügen könnte, um zu entscheiden, was ich dem Benutzer zeigen soll?
// 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");
}
}
Die Komponente wird in dieser Komponente verwendet wird:
// 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) {
...
}
}
Sie könnten einfach ein zusätzliches Formularelement mit versteckten Tag hinzufügen? Es wird nicht direkt an etwas angehängt, aber Sie können damit nach der Formularübergabe arbeiten. –
Die Elternkomponente MUSS jedoch nichts über die Kindimplementierung wissen, da das Kind verschiedene Implementierungen pro Klient hat, so dass sich das Kind selbst darum kümmern muss. Und die Übergabeschaltfläche befindet sich in der übergeordneten Komponente – rickul