Я работаю над компонентом, который позволяет пользователю динамически добавлять новый элемент формы. Код доступен здесь и ниже https://stackblitz.com/edit/angular-h3tmfe. У меня есть два вопроса:
1) Как проверить, что элемент формы не пуст перед добавлением новой строки?
2) Как программно получить доступ к значению в элементе формы?
то есть, если вывод {{invoiceForm.value | json}}
приведен ниже, как мне получить доступ к «элементу 1»? то есть invoiceForm.itemRows(0).value или что-то в этом роде?
{
"itemRows": [
{
"itemname": "item 1"
},
{
"itemname": "item 2"
}
]
}
app.component.html
<hello name = "{{ name }}"></hello>
<h3 class = "page-header">Add Invoice</h3>
<button type = "button" (click) = "addNewRow()" class = "btn btn-primary">Add new Row</button><br>
<form [formGroup] = "invoiceForm">
<div formArrayName = "itemRows">
<div *ngFor = "let itemrow of invoiceForm.controls.itemRows.controls; let i=index" [formGroupName] = "i">
<h4>Invoice Row #{{ i + 1 }}</h4>
<div class = "form-group">
<label>Item Name</label>
<input formControlName = "itemname" class = "form-control">
</div>
<button *ngIf = "invoiceForm.controls.itemRows.controls.length > 1" (click) = "deleteRow(i)" class = "btn btn-danger">Delete Button</button>
</div>
</div>
</form>
<pre>{{invoiceForm.value | json}}</pre>
app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public invoiceForm: FormGroup;
constructor(private _fb: FormBuilder) { }
ngOnInit() {
this.invoiceForm = this._fb.group({
itemRows: this._fb.array([this.initItemRows()])
});
}
get formArr() {
return this.invoiceForm.get('itemRows') as FormArray;
}
initItemRows() {
return this._fb.group({
itemname: ['']
});
}
addNewRow() {
this.formArr.push(this.initItemRows());
}
deleteRow(index: number) {
this.formArr.removeAt(index);
}
}
Вы можете получить доступ к значениям массива формы, используя
this.formArr.value
Чтобы проверить, не пусто ли предыдущее поле
if (this.formArr.value[this.formArr.value.length-1].itemname !== ""){
this.formArr.push(this.initItemRows());
} else {
//display warning
}
Этот фрагмент кода поможет вам проверить, действительна ли форма перед добавлением/нажатием новой строки.
addNewRow() {
this.isClicked = true;
const itemFormCtrl = this.invoiceForm.controls['itemRows'];
if (itemFormCtrl.valid) {
this.formArr.push(this.initItemRows());
this.isClicked = false;
}
}