标签: angular-reactive-forms

使用 Angular 4，我有一个带有复选框的反应式表单。必须至少选中其中一个复选框才能提交表单。

我创建了一个自定义验证，它似乎返回正确的值，但表单始终无效。但是，当我检查表单控件是否有错误时，我得到错误。

---- 笨蛋 ----

这是具有相同行为的示例代码：

@Component({
  selector: 'my-app',
  providers: [FormBuilder],
  template: `
    <div> 
      Checkbox values: {{alertForm.value | json}}
      <mark> Is Form Valid: {{alertForm.valid}} </mark> <-- WHY IS FORM VALID ALWAYS FALSE?
      Does Fields have error: {{alertForm.get('fields').hasError('checkboxSelected')}}
    </div>

    <form [formGroup]="alertForm">
      <fieldset class="form-group" formGroupName="fields">
        <legend class="col-md-4"> Fields</legend>
        <div class="col-md-8 checkbox column-2">
            <label *ngFor="let type of types.controls; let i=index"> 
              <input name="fieldsAdd" type="checkbox" [formControl]="type" />
                {{fields[i].name}}
            </label>
        </div>
    </fieldset>
    </form> 

  `
})
export class App implements OnInit {
  alertForm: FormGroup;
  fields …

我创建了一个带有多个输入字段的反应式表单。验证对于一个字段效果很好，但我坚持对动态添加的输入字段进行验证。

我想要实现的是，对于每一行，两个输入字段都应该是必需的。问题肯定是formarray的访问。

我在Stackblitz上创建了一个简化版本

如何将 formArray 中的 formgroup 推送到第 0 个索引处。它应该被 formArray 中的第 0 个元素替换。

如何使用反应形式编辑对象？假设我们有一个对象数组：

people = [
{name: "Janek", color:"blue", id: 1},
{name: "Maciek", color:"red", id: 2},
{name: "Ala", color:"blue", id: 3},
]

如果我想使用模板驱动方法编辑对象的属性 - 这非常简单。超文本标记语言

*ngFor="let person of people" 

和

ngModel="person.name"加"person.color"

如何使用反应式表单来做到这一点，这样我就不会丢失 Id （和其他属性）？

我有一个表单，仅当值不等于 0 时，我才想实现 MAXLENGTH 验证。

那么有parameter.valueMaxlength === 0 { then dont execute maxlength validation } 没有办法把这个逻辑写在html文件中呢。

 <mat-form-field *ngSwitchCase="'TEXTBOX'" class="example-full-width">
  <input
    matInput
    [placeholder]="parameter.displayName"
    [formControlName]="parameter.id"
    [id]="parameter.id"
    [type]="parameter.dataType"
    [maxlength] = "parameter.valueMaxlength"

  />
</mat-form-field>

每次尝试这样的事情时，都会向我显示错误“TypeError：control.setParent 不是函数”...目标是获得答案（'odgovori' FormArray），但不是在输入上循环，而是在单选组中循环...比用户选择单选按钮作为正确答案并存储全部。什么时候：

console.log(this.odgovorForm.value)

一切都显示正常，但是当推送时显示错误

get odgovori() {
    return this.pitanjeForm.get('odgovori') as FormArray;
  }

 pitanjeForm = this.fb.group({
    data: ['', [Validators.required]],
    odgovori: this.fb.array([]),
    tacan: ['', [Validators.required]]
  });

  odgovorForm = this.fb.group({
    data: ['', [Validators.required]],
    color: 'danger'
  });

  addAnswer(): void {
    console.log(this.pitanjeForm.value, this.odgovorForm.value);
    this.info = this.odgovorForm.value;
    this.odgovori.push(this.info);
  }

超文本标记语言

<form [formGroup]="pitanjeForm">
 <div>
   <input formControlName="data">
 </div>
  <form [formGroup]="odgovorForm">
    <input formControlName="data">
    <button (click)="addAnswer()"></button>
  </form>
 <div *ngFor="let odgovor of odgovor.value; index as i">
   <input type="radio" value="{{ i }}"> 0 - 30<br>
 </div>
</form>

在我的NgOnInit()上，我\xc2\xb4m 创建一个像这样的新表单。

  ngOnInit(){\n    this.expenseForm = this.fb.group({\n      type: \'\',\n      expenses: this.fb.array([this.buildExpense()])\n    })\n  }\n

我有一个名为type的键，它在我的对象上以空开头，还有一个名为expenses的键

  buildExpense(): FormGroup {\n    return this.fb.group({\n      description: \'\',\n      quantity: \'\',\n      price: \'\'\n    })\n  }\n\n  addExpense(): void {\n    this.expenses.push(this.buildExpense())\n  }\n

  <button class="btn btn-outline-primary add" type="button" (click)="addExpense()">Add Expense</button>\n