Question

我正在尝试通过传递ID更新数据库中的行。

我有一个表单组件，你可以看到我正在使用反应式formBuilder：

@Component({
  selector: 'program-form',
  templateUrl: './program.form.component.html',
  styleUrls: ['./program.form.component.css']
})
export class ProgramFormComponent implements OnInit {

  form: FormGroup;
  title: string;
  program: ProgramModel = new ProgramModel();

  constructor(
    formBuilder: FormBuilder,
    private router: Router,
    private route: ActivatedRoute,
    private dataService: DataService
  ) {
    this.form = formBuilder.group({
      name: ['', [
        Validators.required,
        Validators.minLength(3)
      ]],
    //   email: ['', [
    //     Validators.required,
    //     BasicValidators.email
    //   ]],
    //   phone: [],
    //   address: formBuilder.group({
    //     street: ['', Validators.minLength(3)],
    //     suite: [],
    //     city: ['', Validators.maxLength(30)],
    //     zipcode: ['', Validators.pattern('^([0-9]){5}([-])([0-9]){4}$')]
    //   })
    });
  }

  ngOnInit() {
    var id = this.route.params.subscribe(params => {
      var id = params['id'];

      this.title = id ? 'Edit' : 'New';

      if (!id)
        return;

      this.getProgram(id);
    });
  }

  private getProgram(id: number) {
        this.dataService.setEndpoint('/api/program/getsingle');
        this.dataService
            .GetSingle(id)
            .subscribe(data => {
                this.program = data
            }, (error) => {
                console.log(error);
            });
  }

  create() {
    var result,
        userValue = this.form.value;

        console.log(userValue.Id + ", userValueId");

    if (userValue.id){
        this.dataService.setEndpoint('/api/program/update');
        result = this.dataService.Update(userValue.Id, userValue);
    } 
    else 
    {
        this.dataService.setEndpoint('/api/program/create');
        this.dataService.Create(userValue).subscribe(data => {
                (data => this.router.navigate(['users']));
            }, (error) => {
                console.log(error);
            });;
    }

    //result.subscribe(data => this.router.navigate(['users']));
  }
}

HTML：

<div class="row">
  <form materialize class="col s12" [formGroup]="form" (ngSubmit)="create()">
    <div class="row">
      <div class="input-field col s12">
        <i class="material-icons prefix">account_circle</i>
        <label for="name"
               [class.active]="program.name"
               data-error="Name is required and needs to contain at least 3 chars">
          Name
        </label>
        <input id="name" type="text" class="validate"
               [(ngModel)]="program.name" formControlName="name"
               [class.invalid]="form.controls['name'].touched && !form.controls['name'].valid">
      </div>
    </div>

    <button class="btn waves-effect waves-light" type="submit">
      Submit<i class="material-icons right">send</i>
    </button>
  </form>
</div>

如何从this.form.value中检索ID，因为您可以看到我正在尝试获取ID，但是console.log说它未定义。我是否必须在表单构建器内部或在html中初始化它？

Answer 1

如果用户输入此ID，或者您从何处获取，您似乎在表单上没有Id？

如果您想加入表单，则需要添加到表单组中，如：

id: [id ||''],
name: ['', [...

Answer 2

你应该实际使用你创建的反应形式，现在你还没有在你的html中这样做。构建表单时，可以使用html中的表单控件，以及任何可能的表单数组和嵌套表单组。这是一个非常简化的代码版本，我们可以很容易地集成id，我们决定不将它包含在模板中！：）

您可以使用不显示表单的布尔标志，直到我们使用您从db接收的数据构建它。我们还创建了一个函数，我们称之为构建表单。我们称之为buildForm()所以你的getProgram会在回调中调用它（订阅）：

.subscribe(data => {
   this.program = data;
   this.buildForm(); // here!
}, ...

然后让我们构建表单！

buildForm() {
  this.form = this.formBuilder.group({
    id: [this.program.id]
    name: [this.program.name]
  });
  this.isDone=true; // set boolean flag true so that the form will be shown!
}

现在我们实际使用了我们创建的表单控件。在这里，我们可以排除表单控件id，它仍然具有值，我们只是不显示它。请注意使用formControlName：

<form [formGroup]="form" *ngIf="isDone" (ngSubmit)="create(form.value)">
  <input formControlName="name" />
  <button type="submit">Submit</button>
</form>

那就是它！当您现在控制台记录表单值时，它还将包含id。

从 official docs 了解有关被动表单的更多信息，formControl：s，FormArray：s和FormGroup。

最后使用我上面描述的代码 DEMO ：）

PS。如果您需要一个空表单，您可以像初始化组件一样构建它。然后，当您收到数据时，您可以调用函数并修改值，如下所示：

this.form.patchValue({
  id: this.program.id,
  name: this.program.name
})

然后当然不要使用布尔标志。

如何使用FormBuilder在更新时传递对象的id

2 个答案: