Angular 角度选择下拉列表

我遇到的问题是，当我试图将列表数据放入“选择”下拉列表时

我试图从这里找到解决办法 但是没有运气

我的组件如下所示：

 export class LandingPageComponent {
  submitted = false;
  oppoSuits: any = ['Men', 'Women', 'Boys', 'Inspiration']

  constructor(public fb: FormBuilder) { }

  oppoSuitsForm = this.fb.group({
    name: ['', [Validators.required]]
  })

  changeSuit(e) {
    this.oppoSuitsForm.get('name').setValue(e.target.value, {
      onlySelf: true
    })
  }


  public handleError = (controlName: string, errorName: string) => {
    return this.oppoSuitsForm.controls[controlName].hasError(errorName);
  }

  ngOnInit() {
    this.oppoSuitsForm = new FormGroup({
      name: new FormControl(""),

    });
  };
  onSubmit() {
    this.submitted = true;
    alert(JSON.stringify(this.oppoSuitsForm.value))
  }
}

和html文件：

<form [formGroup]="oppoSuitsForm" (ngSubmit)="onSubmit()">
        <select formControlName="name" (change)="changeSuit($event)">
          <option value="">Choose oppo suit</option>
          <option *ngFor="let suit of oppoSuits">{{suit}}</option>
        </select>
          <div class="error-block" *ngIf="submitted && handleError('name', 'required')">
            You must provide a value!
          </div>

        <button>Submit</button>
 </form>

选择oppo套装
{{suit}}
您必须提供一个值！
提交

在控制台中，我得到以下信息： 错误：formGroup需要一个formGroup实例

以及：

---

无法读取未定义的属性“get”

您正在定义表单组两次。您只需要实例化它一次，我建议在构造函数中进行实例化

@组件（{…}）
导出类组件{
反对形式：FormGroup；
构造函数（私有fb:FormBuilder）{
this.oppositysform=this.fb.group({
名称：[''[Validators.required]]
});
}
}

---

这将解决您的两个错误。

您定义了两次表单组。您只需要实例化它一次，我建议在构造函数中进行实例化

@组件（{…}）
导出类组件{
反对形式：FormGroup；
构造函数（私有fb:FormBuilder）{
this.oppositysform=this.fb.group({
名称：[''[Validators.required]]
});
}
}

---

这应该可以解决您的两个错误。

尝试

表单实际上是异步的，如果我尝试使用*ngIf=”“表单时，表单消失了。啊，没有仔细查看代码。我现在看到您还有更多的问题。请尝试

表单实际上是异步的。如果我尝试使用*ngIf=”“表单不见了，那么请不要查看代码。我知道你还有其他问题，像这样<代码>提交=错误；反对者：any=[‘男人’、‘女人’、‘男孩’、‘灵感’]反对者形式：FormGroup；构造函数（private fb:FormBuilder）{this.oppositionsform=this.fb.group（{name:[''[Validators.required]]}）；}仍然存在相同的错误，在构造函数中实例化表单，并在定义属性和

ngOnInit

函数时删除代码中的两个安装。确定，已删除Ngonit函数。。但还是有同样的错误。也许遗漏了一些东西这应该有用，你能为你的问题创建一个stackblitz吗？很有趣。。在我的本地文件中，它不工作。在闪电战中它起作用了。。我是这样使用8版的吗<代码>提交=错误；反对者：any=[‘男人’、‘女人’、‘男孩’、‘灵感’]反对者形式：FormGroup；构造函数（private fb:FormBuilder）{this.oppositionsform=this.fb.group（{name:[''[Validators.required]]}）；}仍然存在相同的错误，在构造函数中实例化表单，并在定义属性和

ngOnInit

函数时删除代码中的两个安装。确定，已删除Ngonit函数。。但还是有同样的错误。也许遗漏了一些东西这应该有用，你能为你的问题创建一个stackblitz吗？很有趣。。在我的本地文件中，它不工作。在闪电战中它起作用了。。我正在使用版本8