Question

我的Angular 7项目有问题。我有

<form [formGroup]="myFormGroup">
  <mat-form-field>
    <input value="some text" matInput placeholder="sometext" formControlName="aName" #myName>
  </mat-form-field>
</form>

和

<p id="first-paragraph">{{myName.value}}</p>

还有

<p id="second-paragraph">form value: {{myFormGroup.value | json}}</p>

问题是，在第一段中我可以看到输入的初始值-“某些文本”，但是在第二段中，直到我对输入进行了任何更改，它才显示出来。例如，如果我手动键入“ abcdef”，则两段中都包含“ abcdef”。有什么办法可以解决？

Answer 1

在组件中定义表单组时，只需执行以下操作：

this.myFormGroup = new FormGroup({
    aName: new FormControl('some text'),
});

这样，您就可以将值的初始化留给它所属的组件逻辑。

我还建议定义这样的方法：

get myvalue(): string { 
    return this.myFormGroup.get('aName').value;
}

这样做，您应该可以通过以下方式访问模板中的值

<p id="first-paragraph">{{myvalue}}</p>

还要从模板中删除value="some text"，一切顺利。

希望对您有帮助！

Answer 2

我认为您可以对[(ngModel)]="name"使用双向绑定，并从组件中初始化“名称”并使用它{{name | json}}

<input value="some text" matInput placeholder="sometext" formControlName="aName" [(ngModel)]="name" #myName>

希望有帮助！

Angular 7-如何使JSON可见初始输入值？

2 个答案: