Здравствуйте, я использую реактивные формы Angular, я использовал FormArray для динамического добавления элементов управления формы. Я использую директиву ngModel для хранения введенных пользователем данных в переменной компонентов. но он не хранит его в переменной компонентов. мой код:
<form [formGroup]="reviewForm" (ngSubmit)="onSubmit()">
<div class="example-label">
<span class='block'>
<span *ngIf="selectedForm">
<h2 class="example-heading">{{displayForm}} </h2>
</span>
<div formArrayName="controlArray">
<div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">
<table>
<tr>
<td> <span *ngIf="control.value.controlType == 'text'">
<md-form-field class="example-full-width">
<input mdInput type="text" placeholder="{{control.value.placeholder}}"
([ngModel])="control.value.value" > <!--user entered data is not storing in control.value.value -->
</md-form-field>
</span></td>
</tr>
</table>
</div>
<button md-raised-button color="primary" type="submit" [disabled]="!reviewForm.valid">Submit</button>
</div>
</span>
</div>
</form>
Вот код класса компонента:
export class FormListComponent {
formsDb: FormData[];
selectedForm: FormData;
displayForm: String;
test: String;
reviewForm = new FormGroup({
'controlArray': new FormArray([])
});
constructor(public formService: FormService, public authGuardService: AuthGuardService) {
console.log('form-list is logged in 0528', this.authGuardService.authService.isLoggedIn);
}
ngOnInit() {
this.reviewForm = new FormGroup({
'controlArray': new FormArray([
])
});
this.showDefaultForm();
}
addForm() {
this.displayForm = this.selectedForm.formName;
this.reviewForm.setControl('controlArray', new FormArray([])); //to reset FormArray
console.log('selected form 0528', this.selectedForm);
for (let control of this.selectedForm.controlsArr) {
const myControl: Control = new Control(control.controlType, control.label, control.required,
control.placeholder, control.options);
var controlArg: FormControl;
if (control.required)
controlArg = new FormControl(myControl, Validators.required);
else
controlArg = new FormControl(myControl);
(<FormArray>this.reviewForm.get('controlArray')).push(controlArg);
}
}
onSubmit() {
console.log('submitted form 0528', this.reviewForm);
}
}
Вот мой класс Control, я передаю его объект конструктору FormControl:
export class Control{
constructor(public controlType?:string, public label?:string, public required?:boolean ,public placeholder?:string,
public options?:string[], public value?:string){ }
}
чтобы проверить, хранятся ли введенные пользователем данные в переменной компонента, я зарегистрировал свою переменную FormGroup, то есть reviewForm в этом случае. Никакие данные в нем не сохраняются. Пожалуйста, помогите, спасибо
value
просто примените свои собственные имена элементов управления формой в цикле, где вы устанавливаете группы форм для формирования массива. 05.12.2017<child></child>
, также он может быть родительским, когда у вас есть<router-outlet></router-outlet>
внутри родителя. Когда дело доходит до взаимодействия компонентов (если это стоит за этим вопросом), это означает, что когда у вас есть дочерний селектор внутри родителя, вы можете использовать@Input
и@Output
, тогда как вы не можете использовать его, когда дочерний элемент находится за маршрутизатором. В таком случае вам необходимо воспользоваться услугой. Надеюсь, это поможет :) 01.01.2018