angular 中 FormControl 和 AbstractControl 的问题

Question

我正在学习在线课程，但我遇到了很多问题。

我靠我把我的代码我得到

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>

这是一个使用反应形式的模板示例：

<!-- 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 你会看到有一个例子在做你所做的事情：

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

最终答案

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

Answer 2

我也有同样的问题，然后我改变了： fg: FormGroup; on fg: any;

angular 中 FormControl 和 AbstractControl 的问题

Problems with FormControl and AbstractControl in angular

forms

form-control

angular

angular-abstract-control

这是一个使用反应形式的模板示例：

一些注意事项：

最终答案