angular - angular 中 FormControl 和 AbstractControl 的问题

Question

我正在学习在线类(class)，但我有很多问题。
我取决于我把我的代码我得到

type 'abstractcontrol' is missing the following properties from type 'formcontrol': registerOnChange, registerOnDisable, _applyFormState

或者

type Abstractcontrol is not assignable to type 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>这是使用响应式(Reactive)形式的模板示例:

<!-- 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 的不同版本，而是 ReactiveForms 的不同用例的 Angular 。一个使用表格，另一个不使用。