角度选择下拉菜单

Question

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

我从这里尝试了一个解决方案formGroup expects a FormGroup instance 但没有运气

我的组件如下所示：

 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>

在控制台我得到这个： 错误：formGroup 需要一个 FormGroup 实例

和：

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

Answer 1

您正在定义表单组两次。你只需要实例化一次，我建议在构造函数中这样做。

@Component({...})
export class Component {
  oppoSuitsForm: FormGroup;

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

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