Angular четкое значение textarea в форме, но значение формы должно присутствовать

Question

Я использую реактивные формы в angular У меня есть текстовое поле и кнопка добавления, когда я ввожу какое-либо значение в текстовое поле и нажимаю кнопку добавления, ссылка будет сгенерирована над текстовой областью после добавления каждого значения i хотите очистить текстовое поле, но значение должно присутствовать в форме.

<form [formGroup]="myForm">
<div *ngFor="let item of links">
<a href="{{ item.link }}" target="blank">{{ item.link }}</a>
</div>
<div>
<textarea formControlName="documentLink"></textarea>
<button type="submit" (click)="addlink(myForm)">Add</button>
</div>
</form>

export class AppComponent {
public documentLink: string[] ;
public links = Array<{ link: string }>();
public myForm: FormGroup = new FormGroup({
documentLink: new FormControl()});
public linkdata=[]
addlink(data: any) {
if(data.value.documentLink==''){
alert("Please enter valid link");
return;
}
else
{
this.links.push({ link: data.value.documentLink });
for(let i=0;i<this.links.length;i++){
this.linkdata.push(this.links[i].link)
}
this.myForm.setValue({documentLink: this.linkdata})
console.log(this.myForm.value)
} 
}

Answer 1

Хотелось бы понять ... Зачем нужно хранить значение в форме? Однако я думаю, что нельзя, реактивные формы используют двустороннюю привязку данных. Таким образом, если вы измените одно из них, оно заменит другое. последнее значение формы. Таким образом, вы можете получить доступ к этому значению, когда оно вам понадобится.

Answer 2

Не существует встроенного решения с реактивными формами, подходящего для вашего варианта использования. За исключением случаев, когда у вас есть другие для this.links и this.linkdata, они звучат как дубликаты.

Вот решение, сохраняющее каждую ссылку внутри массива и каждый раз сбрасывающее значение формы:

links: string[] = []
addLink() {
 if (this.myForm.value.documentLink === '') {
  return;
 }
 this.links = [...this.links, this.form.value.documentLink];
 this.myForm.get('documentLink').reset();

}