angular - 将 FormBuilder 输入值与另一个输入值绑定(bind)

Question

我有一个带有名称和里程碑输入的表单。我希望我的里程碑的输入值为里程碑:+名称，并在用户输入名称时自动更新。

我正在尝试使用 ngModel 绑定(bind)来实现此目的。

<!-- My name input -->
<input mdInput [(ngModel)]="phaseName" formControlName="name" placeholder="Nom" required>

在我的 ts 组件构造函数中:

public phaseForm: FormGroup;
phaseName: string;

this.phaseForm = fb.group({
        'name': ['', Validators.required],
        'milestone': ['Milestone: ' + this.phaseName, Validators.required]
    });

但是由于里程碑的默认值是在构造函数中设置的，因此当我的用户键入名称时它不会更新，我应该添加或执行什么操作才能实现绑定(bind)？

Answer 1

you can set like that. after init form builder in ngOnInit() method. if you can use input box inside formgroup. it's already two way binding so no need bind a value. if you want to get form value.

for eg : const phaseFormValue = this.pahseForm.value;
 console.log(phaseFormValue.name);

ngOnInit(): void {
 this.phaseForm.setValue({milestone:'Milestone: ' + this.phaseName});
}

if you can use input box outside. then try this code.

<input mdInput [(ngModel)]="phaseName" (keypress)="handleKeyboardEvent($event)" placeholder="Name">

//组件

@HostListener('document:keypress', ['$event'])
    handleKeyboardEvent(event: KeyboardEvent): void {
            this.phaseForm.setValue({milestone:'Milestone: ' + this.phaseName});
    };