角度中的 FormControl 和 AbstractControl 问题

Question

我正在学习在线课程，但我有很多问题。

我取决于我得到的代码

“abstractcontrol”类型缺少“formcontrol”类型的以下属性：registerOnChange、registerOnDisable、_applyFormState

或

类型 Abstractcontrol 不能分配给类型 formcontrol

在我的组件的 TS 中有

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import {  FormBuilder, FormGroup } from '@angular/forms';
import { DestinoViaje } from '../models/destino-viaje.model';

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

  @Output() onItemAdded: EventEmitter<DestinoViaje>;
  fg: FormGroup;

  constructor(fb: FormBuilder) {
    this.onItemAdded = new EventEmitter();
    this.fg = fb.group({
      nombre: [''],
      url: ['']
    });
    console.log(this.fg);

  }

  ngOnInit(): void {


  }

  guardar(nombre: string, url: string): boolean {
    let d = new DestinoViaje(nombre, url);
    this.onItemAdded.emit(d);
    return false;

  }

}

在我拥有的组件的 HTML 中

<form
        [formGroup]="fg"
        (ngSubmit)="guardar(
                                fg.controls['nombre'].value,
                                fg.controls['url'].value
                    )">
  <div class="form-group">
    <label for="nombre">Nombre</label>
    <input type="text" class="form-control"
            id="nombre" placeholder="Ingresar nombre..."
            [formControl]="fg.controls['nombre']">
  </div>
  <div class="form-group">
    <label for="Imagen Url">Imagen Url</label>
    <input type="text" class="form-control"
            id="imagenUrl" placeholder="Ingresar url..."
            [formControl]="fg.controls['url']">
  </div>
  <button type="submit" class="btn btn-primary">Guardar!</button>
</form>

我不确定示例是哪个版本，但我使用的是 Angular 11.05

提前致谢。

问候

尼古拉斯

Answer 1

这是因为您的 nombre 和 url 不是控制字段，您将它们设为空字符串数组。你应该像这样创建它们

this.fg = fb.group({
      nombre: this.fb.control(/*initial value*/'', /*validators that they should pass*/[]')',
      url:this.fb.control(/*initial value*/'', /*validators that they should pass*/[]')'
});

所以你创建一个FormControl 而不是Array<string>

这是一个使用响应式表单的模板示例：

<!-- component.template.html -->

<form [formGroup]="group">
    <input type="email" formControlName="email">
    <input type="password" formControlName="passw">
    <!-- more inputs maybe -->
</form>

@Component({...})
export class YourComponent implements OnInit {

    // This is our reactive form that we want to use
    group: FormGroup;

    constructor(private fb: FormBuilder) {}

    ngOnInit() {
        const fb = this.fb; // So we write less code
        this.group = fb.group({
            // On the left side we use the formControlName that we are going to use in the html
            // then, on the control we pass the default value of the input and an array of validators. 
            // Validators are just functions that may return errors given a certain control input.
            email: fb.control('', [Validators.required]),
            // Remember that passw is what we used on the formControlName of the template
            passw: fb.control('', [Validators.required])
        });
    }

}

一些注意事项：

考虑到您的困惑，如果您检查here，您会看到有一个示例正在执行您所做的操作：

只需使用FormControl，以防您有一个不属于任何<form> 或FormGroup 的输入。当你有一个完整的表格时，如果你向下滚动，你会看到一个看起来更像我在我上次编辑我的答案时给你的例子。

最终答案

不，这不是因为 Angular 的不同版本，而是 Angular ReactiveForms 的不同用例。一个使用表单，另一个不使用。

Answer 2

我也遇到了同样的问题，后来改了：fg: FormGroup; on fg: any;