Question

我有一个包含name和milestone输入的表单。我希望我的milestone输入值为Milestone: + name，并在用户输入名称时自动更新。

我正在尝试使用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]
    });

但由于里程碑的默认值是在构造函数中设置的，因此我的用户输入名称时不会更新，我应该添加或执行哪些操作以实现绑定？

Answer 1

你可以这样设置。在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">

// component

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

Answer 2

HTML

<telerik:GridViewColumn IsReadOnly="True">
    <telerik:GridViewColumn.Header>
        <TextBlock FontWeight="Bold" Text="Text" />
    </telerik:GridViewColumn.Header>
    <telerik:GridViewColumn.CellTemplate>
        <DataTemplate>
            <ContentControl Content="{Binding Converter={StaticResource MyConverter}}" />
        </DataTemplate>
    </telerik:GridViewColumn.CellTemplate>
</telerik:GridViewColumn>

组件

获得价值

<input mdInput formControlName="name" placeholder="Nom" required> * no need of ngModel

并检测您可以做的更改

this.phaseForm.value

对于单一属性，你可以这样做

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

检查cookbook here

您可以按照Shailesh Ladumor或建议的方式初始化值在您初始化表单的地方。

将FormBuilder输入值与另一个输入值绑定

2 个答案: