标签: angular-formbuilder

嗨，我是新来的有角度的人，我正在尝试实现表单验证并使用下面的代码，我的问题是嵌套的表单组字段，我在日志中遇到错误TypeError：无法读取null的'touched'属性可以帮助我。

.ts

 ngOnInit() {
    this.employeeForm = this.fb.group({
      fullName: ['',[Validators.required,Validators.minLength(2), Validators.maxLength(10)]],
      email: ['',[Validators.required,Validators.email]],
      skills: this.fb.group({
        skillName: ['',[Validators.required]],
        experienceInYears: ['',Validators.required],
        proficiency: ['']
      })
    });
  }

.html

<form class="form-horizontal" [formGroup]="employeeForm" (ngSubmit)="onSubmit()">

  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Create Employee</h3>
    </div>

    <div class="panel-body">

      <div class="form-group" [ngClass]="{'has-error':((employeeForm.get('fullName').touched ||
      employeeForm.get('fullName').dirty) &&
      employeeForm.get('fullName').errors)}">
        <label class="col-sm-2 control-label" for="fullName">Full Name</label>
        <div class="col-sm-8">
          <input id="fullName" type="text" class="form-control" formControlName="fullName">
          <span class="help-block" *ngIf="((employeeForm.get('fullName').touched ||
          employeeForm.get('fullName').dirty) &&
          employeeForm.get('fullName').errors)">
            <span *ngIf="employeeForm.get('fullName').errors.required">
              Full Name is required
            </span>
            <span *ngIf="employeeForm.get('fullName').errors.minlength ||
                   employeeForm.get('fullName').errors.maxlength">
              Full Name must be …

我正在使用Angular5，并且有一个字段列表，每个字段都有一个名称和FormControl。我尝试使用此代码将控件动态添加到组中，但出现错误。

const formControlFields = [
  {name: 'field1',control: [null, []] as FormControl},
  {name: 'field2',control: [null, []] as FormControl}
];

const formGroup: FormGroup = new FormGroup({});
formControlFields.forEach( f =>  formGroup.addControl(f.name,f.control));
this.form = new FormGroup({groups:formGroup});

这是我得到的错误：

错误TypeError：control.setParent不是函数

at FormGroup.registerControl (forms.js:4352)
at FormGroup.addControl (forms.js:4372)
at eval (trade-search.component.ts:142)

Run Code Online (Sandbox Code Playgroud)

I was trying to use extra parameter map provided by Angular FormBuilder

group(controlsConfig: {
    [key: string]: any;
}, extra: {
    [key: string]: any;
} | null = null): FormGroup

Docs : FormBuilder

But facing

this.validator is not a function

If i pass a single validator instead of an array, the above error vanishes but the validation does not happen?

Can someone help me with this or provide the correct way of using the extra map parameter?

My component and its …

以下是我的代码，可从服务获得响应。在这里，我得到了员工名单。

我需要根据服务的响应动态地绑定表单控件，我的服务返回的字段（表单中的员工ID，姓名，部门等）比表单控件更多。如何跳过那些不在窗体控件中使用的控件？

this._employeeService.getEmployeeById(this.employeeId).subscribe((res: Response) => {
        debugger;
        this.employeeForm.get('FileUploader').setValue(null);        
        //this.employeeForm.setValue(res);
        for (const field in res) {
          this.employeeForm.controls[field].setValue(res[field]);
        }
      }); 

this.employeeForm = this._fb.group({
      EmployeeId: 0,
      Name: ''});

我写了下面的代码片段，我认为这将禁用FormControl的FormArray。

some.component.html

<form [formGroup]="testForm">
    <div *ngFor="let num of countArr">
        <input type="text" formNameArray="arrs">
    </div>
</form>

some.component.ts

countArr = [1, 2, 3, 4, 5];
count = 5;
arrs;
testForm: FormGroup;

this.testForm = this.formBuilder.group(
    arrs: this.formBuilder.array([])
);

this.arrs = this.testForm.get('arrs');

for (let i = 0; i < this.count; i++) {
    this.arrs.insert(i, new FormControl({value: '', disabled: true}));
}

但是for执行完成后，我检查了表单，发现没有任何内容被禁用。你能告诉我我哪里做错了吗？？？:-)

感谢您的帮助！！！:-)

i have problems with reactive forms and an array of radio buttons.

My Form looks like this:

There is a player in a row and i have to choose the status.

component:

 <tr *ngFor="let data of player">
        <th>{{data.firstname}} {{data.lastname}}</th>
        <th *ngFor="let stat of status">
        <input type="radio" id="opt1+{{data.id}}" value="{{stat}}" name="option+{{data.id}}" formArrayName="status???"></th>
      </tr>

The player data comes from an API and status is an array.

ts:

this.myForm = formBuilder.group({
    status: this.formBuilder.array,
    })

My example does not work. I need a json-file as …

我有一个反应式

 <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>enter items</ng-template>
      <div style="display: flex; flex-direction: column;">
        <mat-form-field>
          <input matInput type="text" placeholder="category"  [(ngModel)]="newItem.CategoryName" formControlName="category"
          />
        </mat-form-field>
        <mat-form-field>
          <input matInput type="text" placeholder="sub category"  [(ngModel)]="newItem.SubCategoryName" formControlName="subCategory"
          />
        </mat-form-field>
        <mat-form-field>
          <input matInput type="text" placeholder="product"  [(ngModel)]="newItem.ProductName" formControlName="name"/>
        </mat-form-field>
        <mat-form-field>
          <input matInput  [(ngModel)]="newItem.Amount" type="number" min="0" placeholder="amount" formControlName="amount"
          />
        </mat-form-field>
        <mat-form-field>
          <input matInput  [(ngModel)]="newItem.Price" type="number" min="0" placeholder="price" formControlName="price"
          />
        </mat-form-field>
        <button mat-raised-button color="primary" (click)="AddNewProduct(newItem)" style="float: left; align-self: flex-end;">submit</button>
      </div>
    </form>

我这样初始化：

 this.secondFormGroup = this._formBuilder.group({
  category: ['', Validators.required],
  subCategory: ['', Validators.required],
  name: ['', …

这是我的主要代码：

get emailFormArray() {
  return this.formGroup.get("emails") as FormArray;
}

public ngOnInit() {
  this.formGroup = this.formBuilder.group({
    emails: this.formBuilder.array([]),
  });
  this.addEmailFormGroup();
}

public addEmailFormGroup() {
  this.emailFormArray.controls.push(
    this.formBuilder.group({
      email: ['', Validators.email],
    }),
  );
}

在我的模板中

{{ formGroup.valid }}
{{ emailFormArray.valid }}
<ng-container *ngFor="let email of emailFormArray.controls">
  {{ email.valid }}
  {{ email.get('email').valid }}
</ng-container>

当我输入一个无效的电子邮件时，模板中的结果是true true false false，为什么formGroup和emailFormArray是有效的？谢谢！