Angular 角度控制中的FormControl和AbstractControl问题

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

我取决于我把我的代码，我得到

类型“abstractcontrol”缺少类型“formcontrol”中的以下属性：registerOnChange、registerOnDisable、\u 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;

  }

}

从'@angular/core'导入{Component，EventEmitter，OnInit，Output}；
从'@angular/forms'导入{FormBuilder，FormGroup}；
从“../models/destino viaje.model”导入{DestinoViaje}；
@组成部分({
选择器：“应用程序表单destino viaje”，
templateUrl:'。/表单destino viaje.component.html'，
样式URL:['./格式destino viaje.component.css']
})
导出类FormDestinoViajeComponent实现OnInit{
@输出（）：EventEmitter；
fg:FormGroup；
构造函数（fb:FormBuilder）{
this.onitemaded=新的EventEmitter（）；
this.fg=fb.group({
名称：['']，
网址：['']
});
console.log（this.fg）；
}
ngOnInit（）：void{
}
guardar（nombre:string，url:string）：布尔值{
设d=new DestinoViaje（nombre，url）；
这个.d.发射（d）；
返回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>

名义
图像Url
瓜达尔！

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

提前谢谢

问候

---

Nicolas

这是因为您的

nombre

和

url

不是控制字段，而是将它们设置为空字符串数组。您应该像这样创建它们

this.fg=fb.group({
nombre:this.fb.control（/*初始值*/''，/*它们应该传递的验证器*/[]'），
url:this.fb.control（/*初始值*/''，/*它们应该传递的验证器*/[]'）”
});

因此，您创建了一个

FormControl

，而不是

Array

下面是一个使用反应式表单的模板示例：

@组件（{…}）
导出类YourComponent实现OnInit{
//这是我们想要使用的反应形式
组：FormGroup；
构造函数（私有fb:FormBuilder）{}
恩戈尼尼特（）{
const fb=this.fb；//因此我们编写的代码更少
this.group=fb.group({
//在左侧，我们使用将在html中使用的formControlName
//然后，我们在控件上传递输入的默认值和一组验证器。
//验证器只是在给定某个控制输入时可能返回错误的函数。
电子邮件：fb.control（“”，[需要验证器]），
//请记住，passw是我们在模板的formControlName上使用的
passw:fb.control（“”，[需要验证程序]）
});
}
}

一些注意事项： 考虑到你的困惑，如果你检查一下，你会发现有一个例子在做你所做的事情：

只需使用

表单控件

，以防您的单个输入不属于任何

或

表单组

。当你有一个完整的表格，如果你向下滚动，你会看到一个例子，看起来更像我上次编辑我的答案时给你的

最终答案

---

不，这不是因为Angular的不同版本，而是Angular的

ReactiveForms

的不同用例。一个使用表单，另一个不使用。

我也有同样的问题，然后我改变了：fg:FormGrouponfg：任何

我已经更改了我的代码--this.fg=fb.group（{nombre:fb.control（/*initial value*/''，/*它们应该通过的验证器*/[]），url:fb.control（/*initial value*/''，/*它们应该通过的验证器*/[]）——但是控制台仍然在我的html代码中说“Type AbstractControl不能分配给Type FormControl”[formControl]=“fg.controls['nombre']”哈哈……问题是formControl不是正确的方式（我认为）…我已将其更改为formControlName='url'，并且它可以工作！！您能告诉我这是否是因为版本之间的差异吗？因为我不明白为什么我以前看到的视频中有这样的代码…谢谢，很抱歉这么晚才回复。在我的时区是睡眠时间，我已更新了我的答案，并提供了有关您所面临问题的更多详细信息：）谢谢很多。但我仍然不明白为什么老师的代码会运行，而当我尝试时却没有。现在我知道当我使用FormGroup时我必须使用formControlName，当我使用单个输入控件时我必须使用formControlName。再次感谢