如何在Angular中分配formControlName?

时间:2019-01-03 10:14:21

标签: angular angular5 angular-forms

我对角形感到困惑。我有以下几行代码。我给了 我认为正确的formControlName和id相同。但是有了这段代码,我得到了

ERROR TypeError: Cannot convert undefined or null to object

我不确定我犯了什么错误。 有人可以帮我吗?真令人沮丧。

ts。

import { FormGroup, FormBuilder, NgForm } from '@angular/forms';
export class FilterProductTargetComponent implements OnInit {
    public gsmList: any = [];
    public gsmModel = '';
    public filterProductTargetForm: FormGroup;

    constructor(private _service: TestService, private _fb: FormBuilder) { }

    ngOnInit() {
        this.filterProductTargetForm = this._fb.group({
            gsmList: '',
            rsmList: '',
            asmList: '',
        });
    }

html

<form [formGroup]="filterProductTargetForm" novalidate (ngSubmit)="save(filterProductTargetForm.value)">
                <div class="row">
                    <div class="col-md-10">
                        <select [(ngModel)]="gsmModel" id="gsmList" formControlName="gsmList">
                            <option value="" disabled selected>select a category</option>
                            <option *ngFor="let item of gsmList" [value]="item">{{item}}</option>
                        </select>
                    </div>
                </div>

1 个答案:

答案 0 :(得分:1)

尝试使用此示例

以HTML格式

<form class="example-container" [formGroup]="dropDownGroup" >
  <mat-form-field >
    <mat-select placeholder="Select numeric value" formControlName="numericControl">
      <mat-option value="1">1</mat-option>
      <mat-option value="2">2</mat-option>
      <mat-option value="3">3</mat-option>
    </mat-select>

  </mat-form-field>
    <mat-error *ngIf="this.dropDownGroup.get('numericControl').invalid">Value required</mat-error>
</form>

在Ts文件中

import {Component,OnInit} from '@angular/core';
import {  FormBuilder, NgForm ,FormControl, Validators,FormGroup } from '@angular/forms';



@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})



export class SelectOverviewExample implements OnInit {

   dropDownGroup:FormGroup

    constructor() { }

    ngOnInit() {
      this.dropDownGroup = new FormGroup({});
      let Validations = [Validators.required]
        if (!this.dropDownGroup.contains("numericControl")) {
         this.dropDownGroup.addControl("numericControl", new FormControl('', Validations));

            }
    }
}