Angular 表单中的明文区域值，但应存在表单值

Question

I'm using Reactive forms in angular I have an textarea and an add button, when I enter some value in textarea and click on add button an link will be generated above the text area, after each value is added i want to clear the textarea,but the value should be present in the form.

<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

There is no built-in solution with Reactive Forms to suit your use case. Except if you have another for this.links and this.linkdata they sounds like duplicates.

Here is a solution storing each link inside an array and resetting the form value each time:

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

}

Answer 2

I would like to understand... Why do you need to keep the value in the form? However, I think You can't, the reactive forms use two-way data binding. So if you change any of those, it will replace the other.

One idea would be using an onChange() event and create a variable with the latest value, so when it changes you will update that variable with the latest value of the form. So you can access to that value when you need it.