首页 文章

以Angular编辑表单

提问于
浏览
0

请帮忙!!我发现编辑表单非常困难 . 我使用反应式表单并将数据添加到表单并发送到数据库非常有效 . 现在我想查询数据库中的数据,以便我可以编辑它并再次发送 . 数据是以json对象的形式从数据库中获取的,我试图将它分配给表单组变量,这样我就可以在表单中显示数据并发送它,但是我收到了错误 .

我也尝试使用模板驱动表单显示数据 . 它适用于输入字段中的值,但只要我尝试使用ngModel绑定数据,输入字段中的值就会变为空白 . 由于值是从数据库中获取的 .

<div class="container">
<h4 class="card-title">Edit Questionnaire</h4>
  <div *ngIf="questionnaires"> 
        <form  #myForm="ngForm" novalidate (ngSubmit)="onSubmit(text)" >
                <div *ngFor="let item of questionnaires.item;" > 
                    <div class="form-group">
                        <input type="text" value="{{ item.prefix }}" class="form-control" ngModel>    
                    </div>

                      <div class="form-group">
                          <input type="text" value="{{ item.text }}" class="form-control" ngModel>  
                      </div>

                      <div *ngFor="let option of item.options; ">
                        <div *ngIf="option.value !== '' ">
                            <div class="form-group">
                                <input type="text" value="{{ option.value }}" class="form-control" ngModel>  
                            </div>
                        </div>

                    </div>

                </div>
                <button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Submit</button>
             <!--  </div> -->
      </form>
</div>

请帮忙!!可以编辑表单并以角度发送到数据库 . 我的Edit Questionnaire组件看起来像这样我使用loopback来查询数据库中的数据

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { QuestionnaireApi } from '../../app/shared/sdk/services';

import { Validators, FormGroup, FormArray, FormBuilder } from '@angular/forms';


@Component({
  selector: 'app-editquestionnaire',
  templateUrl: './editquestionnaire.component.html',
  styleUrls: ['./editquestionnaire.component.scss']
})
export class EditquestionnaireComponent implements OnInit {

   myForm: FormGroup;
   id: string;
   questionnaires: any;
   text: any = [];


  constructor(
    private router: ActivatedRoute,
    private questionnaireapi: QuestionnaireApi,
    private _fb: FormBuilder
  ) { }

  ngOnInit() {
       this.router.params.subscribe(params=>{
            this.id = params.id;
       });

       this.myForm = this._fb.group({
          name: ["", Validators.required],
          description: ["", Validators.required],
          items: this._fb.array([
              this.initItem(),
          ])
      });


     this.questionnaireapi.findById(this.id).subscribe((data)=>{
              this.questionnaires = data;
           //   this.myForm = <FormGroup>this.questionnaires;
              console.log(this.myForm.value);
      },(error)=>{
              console.log(error);
      })
  }



     initItem(){
        // initialize our item
        return this._fb.group({
            prefix: ["", Validators.required],
            text: ["", Validators.required],
            Questiontype: ["", Validators.required],
            options: this._fb.array([
                this.InitOption(),
            ])
        });
    }


    InitOption(){
         return this._fb.group({
             value: [""]
         })
    }

   onSubmit(){

   }

}

1 回答

  • 0

    Unan,我喜欢有一个创建表单的功能 . 您将“数据”作为参数传递给此函数 . 如果要创建From数组,可以调用一个返回FormGroup []的函数,并将数组作为参数 . 简单的方法是返回“数组转换” . 所以我们使用return myArray.map(x => ...)来表示对于数组的每个元素,你构成一个FormGroup .

    所以,如果你有“数据”,你可以做

    this.myForm=createForm(data)
    

    如果你没有数据,你可以做

    this.myForm=createForm(null)
    

    Tha函数必须“喜欢”-in构造函数我有构造函数(private fb:FormBuilder) -

    createForm(data:any):FormGroup
      {
         return this.fb.group({
             //see, if data, the value of name will be data.name, else ""
             name: [data?data.name:"", Validators.required],
             //idem description
             description: [data?data.description:"", Validators.required],
             items: this.fb.array([
                this.getItem(data?data.items:null),
             ])
          });
      }
      getItem(items:any[]):FormGroup[]
      {
          return items?items.map(x=>
          {
              return this.fb.group({
                  prefix: [x.prefix, Validators.required],
                  text: [x.text, Validators.required],
                  Questiontype: [x.QuestionType, Validators.required],
                  options: this.fb.array(this.getOptions(x.options))
                 })
          }):[this.fb.group({
                  prefix: ["", Validators.required],
                  text: ["", Validators.required],
                  Questiontype: ["", Validators.required],
                  options: this.fb.array([this.fb.group({value:""}])
          })]    
      }
      getOptions(options:any):FormGroup[]
      {
         return options?options.map(x=>{
              return this.fb.group({
                 value:x.value
              })
         }):
         [this.fb.group({value:""})]
      }
    

相关问题