Angular 如何设置具有反应形式的角材料切屑控制

我有一个带角材料的角反应形式

对于我的所有控件，我添加了所需的验证器

我不知道如何设置芯片控制正确的反应形式

在哪里设置formControlName，以便触发所需的验证器？目前，我把它设置在输入字段上，我猜这是错误的

我只希望CourseID是一个逗号分隔的字符串，带有课程ID

TS:

HTML:

{{cid}
....
好啊

尝试在

级别设置

formControlName

在模板中，将

ngFor

设置为在

courseIds

控制值上循环

{{cid}

然后在组件中，使用

CourseID

的初始值创建表单组（如果有），否则使用空数组

[]

（因为芯片显示的是数组而不是字符串）。在

add（）

和

remove（）

函数中，分别添加和删除

courseIds

控制值中的值

形式：FormGroup；
恩戈尼尼特（）{
this.form=new FormGroup({
名称：new FormControl（“，[Validators.required]），
courseIds:新表单控件（[]，验证器。必填）
});
}
添加（）{
...
//向courseIds控件值添加新输入
this.courseIds.value.push（value）；
this.courseIds.updateValueAndValidity（）；
}
删除（）{
...
//从控件值数组中删除元素
this.courseIds.value.splice（index，1）；//其中index=删除元素的索引
this.courseIds.updateValueAndValidity（）；
}
//使用getter方法轻松访问courseIds控件值
获取courseIds（）{
返回此.form.get（'courseIds'）；
}

如果将Formarray与nash11结合起来，他的答案就行不通了。我遇到的问题是，当我编辑同一表格组中的另一个表格时，会丢失mat芯片列表中的更改

因此，这里是我的解决方案如何使用材料芯片控制与反应形式+形式阵列

chips-input-example.html：

{{水果}
取消

chips-input-example.ts

从“@angular/cdk/keycodes”导入{逗号，输入}；
从“@angular/core”导入{Component}”；
从“@angular/material/chips”导入{matchipiInputEvent}”；
进口{
FormControl，
FormGroup，
FormGroupDirective，
NgForm，
验证器，
造模工，
形式阵列
}从“@angular/forms”；
/**
*@title带输入的芯片
*/
@组成部分({
选择器：“芯片输入示例”，
templateUrl:“chips input example.html”，
样式URL:[“chips input example.css”]
})
导出类芯片输入示例{
可见=真实；
可选=真；
可移动=真；
addOnBlur=true；
只读分隔代码：数字[]=[输入，逗号]；
表格：表格组；
构造函数（私有fb:FormBuilder）{
this.form=this.fb.group({
水果：this.fb.array（[“Lemon”、“leme”、“Apple”]，验证器。必选）
});
}
获取控件（）：FormArray{
将此.form.controls.fruits作为表格返回；
}
添加（事件：MatChipInputEvent）：无效{
常量输入=event.input；
常量值=event.value；
//加上我们的水果
如果（（值| |“”）.trim（））{
this.frutcontrols.push（this.fb.control（value））；
}
//重置输入值
如果（输入）{
input.value=“”；
}
}
移除（水果：串）：无效{
const index=this.fruitControls.value.indexOf（水果）；
如果（索引>=0）{
this.fruitControls.removeAt（索引）；
}
}
}

芯片本身不是表单组件：它们只是以给定的样式显示一个值。总而言之，你想让你的芯片显示输入的值，这是一个带逗号的字符串吗？不，我已经准备好了。如果没有选择芯片，我需要芯片控制失败验证（必需）。那么我在哪里设置formControlName呢？哦，好吧，那么请再看一遍闪电战，告诉我它是否适合你！请告诉我，这里有一个工作示例，这应该是公认的答案，但请注意，@than的stackblitz示例更好，因为它在

input

元素上没有

formControlName

属性。该属性存在时，在输入时会导致错误，因为芯片是通过迭代

FormControl

value@Nexaddo-谢谢你指出这一点。我打了我的答案，所以我一定错过了。我的代码中有2个

formControlName

s。我已经更新了我的答案。@than，你是传奇人物！

form: FormGroup;

ngOnInit() {
    this.form = new FormGroup({
      name: new FormControl("", [Validators.required]),
      courseIds: new FormControl("", Validators.required)
    });
  }

  <form [formGroup]="form" (ngSubmit)="submit()">

    <mat-form-field>
      <input matInput type="text" formControlName="name" placeholder="Name">
    </mat-form-field>

    <mat-form-field>
      <mat-chip-list #chipList>
        <mat-chip *ngFor="let cid of courseIds" (removed) = "...">
          {{cid}}
        </mat-chip>

        <input matInput formControlName="courseIds"
               [matChipInputFor]="chipList" 
               placeholder="Ids" 
               (matChipInputTokenEnd)="add($event)">
      </mat-chip-list>
   </mat-form-field>    

....

    <button type="submit">OK</button>
  </form>