Tôi đang cố gắng triển khai Biểu mẫu động trong Angular 2. Tôi đã thêm các chức năng bổ sung như Xóa và Hủy vào biểu mẫu động. Tôi đã theo dõi tài liệu này: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html
Tôi đã thực hiện một số thay đổi cho mã. Tôi đang gặp lỗi ở đây.
Làm thế nào để tôi thực hiện lỗi này đi?
Bạn có thể tìm thấy mã đầy đủ ở đây: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview , đang hoạt động trong plunker nhưng không hoạt động trong hệ thống cục bộ của tôi.
Mã HTML:
<div>
<form [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<label [attr.for]="question.key">{{question.label}}</label>
<div [ngSwitch]="question.controlType">
<input *ngSwitchCase="'textbox'" [formControlName]="question.key"
[id]="question.key" [type]="question.type" [(ngModel)]="question.value">
<select [id]="question.key" [(ngModel)]="question.value" *ngSwitchCase="'dropdown'" [formControlName]="question.key" >
<option *ngFor="let opt of question.options" [ngValue]="opt.key" >{{opt.value}}</option>
</select>
<input *ngSwitchCase="'checkbox'" [(ngModel)]="question.value"
[id]="question.key" [type]="question.type" (change)="question.value = ck.checked" #ck [ngModelOptions]="{standalone: true}">
</div>
<div class="errorMessage" *ngIf="!form.controls[question.key].valid">{{question.label}} is required</div>
</div>
<div class="form-row">
<button type="submit" [disabled]="!form.valid" (click)="onSubmit()">Save</button>
<button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
<button type="button" class="btn btn-default" (click)="clear()">Clear</button>
</div>
</form>
<div *ngIf="payLoad" class="form-row">
<strong>Saved the following values</strong><br>{{payLoad}}
</div>
</div>
Mã thành phần:
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { QuestionBase } from './question-base';
import { QuestionControlService } from './question-control.service';
import { ControlGroup } from '@angular/common';
import {ChangeDetectorRef} from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'dynamic-form',
templateUrl: 'app/dynamicform/form.component.html',
directives: [REACTIVE_FORM_DIRECTIVES],
providers: [QuestionControlService]
})
export class DynamicFormComponent implements OnInit {
@Input() questions: QuestionBase<any>[] = [];
form: FormGroup;
payLoad:any;
payLoad2:any;
questiont: QuestionBase<any>;
questiond: QuestionBase<any>;
constructor(private qcs: QuestionControlService, private cdr: ChangeDetectorRef) { }
ngOnInit() {
this.form = this.qcs.toFormGroup(this.questions);
console.log("Form Init",this.questions);
this.questiont = JSON.parse(JSON.stringify(this.questions));
this.questiond = JSON.parse(JSON.stringify(this.questions));
}
onSubmit() {
this.payLoad = JSON.stringify(this.form.value);
this.payLoad2=this.payLoad;
this.questiont = JSON.parse(JSON.stringify(this.questions));
console.log("Submitted data",this.questions);
}
cancel(){
console.log("Canceled");
this.questions = JSON.parse(JSON.stringify(this.questiont));
}
clear(){
this.questions = JSON.parse(JSON.stringify(this.questiond));
this.questiont = JSON.parse(JSON.stringify(this.questiond));
console.log("Cleared");
this.cdr.detectChanges();
}
}
Tôi có lỗi tương tự sau khi nâng cấp. Sẽ viết ở đây nếu tôi tìm thấy lý do tại sao.
—
Carl Boisvert
Được rồi, đối với tôi nó biến mất khi tôi nhập FormsModule trong khai báo NgModule của mình. Nhưng tôi vẫn gặp lỗi khi nói "AppComponent không có cấu hình tuyến đường." ngay cả khi tôi đã nhập các tuyến đường. Nhưng kiểm tra nếu nó khắc phục vấn đề của bạn.
—
Carl Boisvert
Điều này có thể giúp stackoverflow.com/a/49628169/6597375
—
Deepu Reghunath