Question

我正在尝试将用户数据恢复到表单中，但我无法这样做，请帮我，这是我的代码。

我希望将数据加载到OnInit（）的编辑表单中，我使用的是角度4，后端是.Net MVC，并解释我的代码中有什么问题。

列表组件的代码在这里输入代码

`<form
    [formGroup] = "form"
  (ngSubmit) = "onSubmit(form.value)">
  <div class="form-group">
    <label for="firstName">First Name</label>
    <input type="text"  class="form-control" id="FirstName" placeholder="Enter email" formControlName="FirstName">

  </div>
  <div class="form-group">
    <label for="lastName">Last Name</label>
    <input type="text" class="form-control" id="LastName" placeholder="Password" formControlName="LastName">
  </div>


  <div class="form-group">
    <label for="phoneNumber">Phone Number</label>
    <input type="tel" class="form-control" id="Phone"  placeholder="Password" formControlName="Phone">

  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="Email" placeholder="Password" formControlName="Email" >

  </div>

  <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Update</button>
  <button type="reset" class="btn btn-default">Clear</button>
</form>`

这是编辑表单组件的html

`import { Component , OnInit } from '@angular/core';
import { FormBuilder,Validators, FormGroup } from '@angular/forms';
import { Contact } from './contact.interface';

import { ActivatedRoute , Router } from '@angular/router';

import { MediaService } from './media.service';
import 'rxjs/add/operator/switchmap';
@Component({
    selector: 'my-media-form',
    //moduleId: module.id,
    templateUrl: 'app/media-form.component.html'
})
export class MediaFormEditComponent implements OnInit {
     id: string;
    currentContact: Contact;
    contactForm: FormGroup;
    private sub: any;
    form;
    constructor(private router: Router,
                private route : ActivatedRoute,
            private formBuilder: FormBuilder,
            private mediaService: MediaService){}

    ngOnInit(){
        debugger;
        this.form = this.formBuilder.group({
            FirstName: this.formBuilder.control('',Validators.required),
            LastName: this.formBuilder.control('',Validators.required),
            Email: this.formBuilder.control('', Validators.compose([Validators.required])),
            Phone: this.formBuilder.control('',Validators.required)    
        });
        this.sub = this.route.params
        .map(params => params['id'])
        .switchMap(id => this.mediaService.getContactById(id))
            .subscribe((cont: Contact) => {
                this.currentContact = cont;

                this.contactForm.setValue({
                    FirstName      : cont.FirstName,
                    LastName: cont.LastName,
                    Email: cont.Email,
                    Phone: cont.Phone
                });
            });
    }

    onSubmit(Data){
        this.mediaService.UpdateContact(Data)
        .subscribe(data => this.router.navigate(['contacts']));
    }
}`

这是编辑表单component.ts

的代码

var q = from u in db.User
    join ua in db.UserActions on new { UserId = u.Id, ActionType = "Approved" } equals new { ua.UserId, ua.ActionType } into actions
    from ua in actions.DefaultIfEmpty()
    where u.Active
    select new { User = u, Actions = ua}

Answer 1

首先在循环之前创建一个数组（在获取数据之后）：

let newFormArray: FormGroup[] = [];

在你的循环中：

 newFormArray.push(this.fb.group({ FirstName: [cont[i].FirstName, Validators.required], LastName: [cont[i].LastName, Validators.required] //... 
}));

然后制作表格：

        this.form = this.fb.group({
        array: this.fb.array(newFormArray)
    })

导入：import { FormControl, FormArray, FormGroup, FormBuilder, Validators } from '@angular/forms';

将数据提取为angular2形式

1 个答案: