আমি কৌণিক 2 তে ডায়নামিক ফর্মগুলি বাস্তবায়নের চেষ্টা করছি I've আমি এই ডকুমেন্টেশনটি অনুসরণ করেছি: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html
আমি কোডে কিছু পরিবর্তন করেছি। আমি এখানে ত্রুটি পাচ্ছি।
এই ত্রুটিটি আমি কীভাবে করব?
আপনি এখানে পুরো কোডটি সন্ধান করতে পারেন: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview , যা আমার স্থানীয় সিস্টেমে নয় বরং প্লানকারে কাজ করছে।
এইচটিএমএল কোড:
<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>
উপাদান কোড:
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();
}
}
আপগ্রেড করার পরে আমারও একই ত্রুটি রয়েছে। আমি যদি লিখি তবে এখানে লিখব।
—
কার্ল বোইসভার্ট
ঠিক আছে, আমি যখন আমার এনজিএমডিউল ঘোষণায় ফর্মমডুল আমদানি করি তখন আমার জন্য এটি অদৃশ্য হয়ে যায়। তবে "অ্যাপকোম্পোনেন্টের কোনও রুট কনফিগার নেই" বলে আমার এখনও ত্রুটি রয়েছে। এমনকি আমি রুটগুলি আমদানি করেছি। তবে এটি আপনার সমস্যার সমাধান করে কিনা তা পরীক্ষা করে দেখুন।
—
কার্ল বোইসভার্ট
এই হতে পারে সাহায্যের stackoverflow.com/a/49628169/6597375
—
দিপু Reghunath
সম্ভাব্য সদৃশটি 'এনজি মডেল'-এ আবদ্ধ
—
হেরেটিক বানর