Угловой 7 - как сделать начальное входное значение видимым для JSON?

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>

Надеюсь, это поможет!