我有一个具有反应形式的父组件,包括控件和来自组。
当选择playerType下拉列表时,我将向fromGroup添加一个formArray。新的表单数组将由 2 个或 3 个表单组组成,具体取决于玩家类型。
假设用户创建了一个玩家并选择playerType =“Mage”,那么我需要创建一个新的 配置 formGroup 内的“技能” formArray。
下面的示例 - 基本形式:
public PlayerForm: PlayerFormGroup = this.fb.group(
{
id: null,
name: null,
life: 100,
playerType: null,
configuration: this.fb.group({
playerAllies: null
weapons: []
})
) as PlayerFormGroup;
现在玩家已创建并添加了新的 formArray。
看起来像这样:
public PlayerForm: PlayerFormGroup = this.fb.group(
{
id: 1,
name: UserMage1,
life: 100,
playerType: 2,
configuration: this.fb.group({
playerAllies: null
weapons: [],
skills: [mageSkills:[name:'', power:null, duration:0]]
})
) as PlayerFormGroup;
-> 它看起来像:
id:1,
名称:'UserMage1',
寿命:100,
玩家类型:2,
配置:
[玩家盟友:空,
武器:[],
技能:法师技能:[0:{名称:'someName',力量:'火',持续时间:2},1:{名称: '传送',功率:'黑暗',持续时间:4 }] ]
所以,我在节省电量和持续时间方面遇到了麻烦。
代码:
Parent TS:
public getSkillDetails(skillName: string): SkillView{
// from child-component-configure, on selecting get the selected skill name and pass
// it to child-component-view-Skill-details (using event emitter)
return this.skillsArray.find((skill) => skill.name === skillName);
}
父 HTML:
<parent-component [formGroup]="PlayerForm" (submit)="playerForm.submit()">
<mat-form-field>
<mat-label>"Name"</mat-label>
<input matInput formControlName="name">
</mat-form-field>
<mat-form-field>
<mat-label>"Life"</mat-label>
<input matInput formControlName="life">
</mat-form-field>
<mat-form-field>
<mat-label>"Type"</mat-label>
<input matInput formControlName="playerType">
</mat-form-field>
<child-component-configure *ngIf="PlayerForm.control.playerType.value != null"
[selectedSkill] = "skill"> (event emitter to pass selected skill name)
</child-component-configure>
<child-component-view-Skill-details [skillSelected] = "skill">
</child-component-view-Skill-details [value]="getSkillDetails(this.selectedSkill)">
</parent-component>
子 HTML:
<child-component-configure>
<mat-form-field>
<mat-label>"Allies"</mat-label>
<input matInput formControlName="allies">
</mat-form-field>
<mat-form-field>
<mat-label>"Weapons"</mat-label>
<input matInput formControlName="weapons">
</mat-form-field>
<mat-form-field>
<mat-label>"Weapons"</mat-label>
<input matInput formControlName="weapons">
</mat-form-field>
</child-component-configure>
子视图-技能详情-HTML:
<child-component-view-Skill-details>
<div>
<label>Power</label>
<input formControlName="power">
</div>
<div class="slider-text">
<label>Duration</label>
<mat-slider
[max]="10"
[min]="1"
[step]="1"
[(ngModel)]="value.timeout">
</mat-slider>
</div>
</child-component-view-Skill-details>
以上代码是代码的抽象。
我想找到一种方法来更改持续时间和功率并将值更新/传递到基本表单。
当前创建没问题,但是更新时 Power 和 Timeout 始终为 null 和 0。
如果我可以提供更多信息,请告诉我。
如果你想更新formGroup,你可以这样做
你的代码
public PlayerForm: PlayerFormGroup = this.fb.group(
{
id: 1,
name: UserMage1,
life: 100,
playerType: 2,
configuration: this.fb.group({
playerAllies: null
weapons: [],
skills: [mageSkills:[name:'', power:null, duration:0]]
})
) as PlayerFormGroup;
这有效!
PlayerForm = this.fb.group({
id: new FormControl(1),
name: new FormControl(userMage1),
life: new FormControl(100),
playerType: new FormControl(2),
configuration: new FormGroup({
playerAllies: new FormControl(null),
weapons: new FormArray([]),
skills: new FormArray([
new FormGroup({
mageSkills: new FormArray([new FormGroup({
name: new FormControl(''),
power: new FormControl(null),
duration: new FormControl(0)
})])
})
])
})
})
updatePlayer() {
const form = this.PlayerForm.get('configuration').get('skills') as FormArray;
const formArr = form.controls[0].get('mageSkills') as FormArray;
const formMageSkills = formArr.controls[0]
formMageSkills.get('name').setValue('someName')
formMageSkills.get('power').setValue('fire')
formMageSkills.get('duration').setValue(2)
}