将FormBuilder输入值与另一个输入值相结合

我有一个带有name和milestone输入的表单。我希望我的milestone的输入值为Milestone: + name，并在我的用户输入名称时自动更新。将FormBuilder输入值与另一个输入值相结合

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

<!-- 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] 
    });

但作为里程碑的默认值在构造函数中设置，它不更新我的用户键入一个名称，我应该怎么添加或为了达到我的约束力吗？

来源

2017-06-06 Christopher

不在构造函数中初始化。使用'ngOninit'来初始化值并使用'this.phaseForm.value'可以得到值。不需要'ngModel' –

但我想要改变的价值，因为用户输入 – Christopher

它会改变。最终。通过在您的html中添加{{pahseForm.value.name}}来检查。在你的.ts通过'this.pahseForm.value.name'来访问它 –

你可以这样设置。在ngOnInit（）方法中的init表单构建器之后。如果你可以在formgroup中使用输入框。它已经是双向绑定了，因此不需要绑定一个值。如果你想获得表格的价值。

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

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

如果你能使用输入框外。然后尝试此代码。

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

//组件

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

来源

2017-06-06 10:08:20

这将如何帮助实时将名义值的内容绑定到名称上？ – Christopher

你需要删除ngModel和（数据驱动的方法）formControlName是双向绑定。 –

@Chris你可以在窗体或外部使用phaseName输入框吗？ –

的Html

<input mdInput formControlName="name" placeholder="Nom" required> 

* no need of ngModel

组件

中获取价值

this.phaseForm.value

，并及时发现变化可以为单一的财产做

this.phaseForm.valueChanges .subscribe(data => this.onValueChanged(data));

，你可以不喜欢

nameChangeLog: string[] = []; 
logNameChange() { 
    const nameControl = this.heroForm.get('name'); 
    nameControl.valueChanges.forEach(
    (value: string) => this.nameChangeLog.push(value) 
); 
}

检查cookbook here

的建议，你可以初始化值由Shailesh Ladumor或在你初始化的地方形式。

来源

2017-06-06 10:11:09

但是这会在我的表单的所有字段上发生变化，我如何定位单个字段（如名称）？ – Christopher

@Chris。我更新了我的答案 –

将FormBuilder输入值与另一个输入值相结合

回答

相关问题