Angular 嵌套的formArray控件'；空的
我试着在另一张桌子里用角度反应式桌子。但不幸的是，我得到的错误控件”为空 初学者在角。帮帮我Angular 嵌套的formArray控件'；空的,angular,angular-material,Angular,Angular Material,我试着在另一张桌子里用角度反应式桌子。但不幸的是，我得到的错误控件”为空 初学者在角。帮帮我 import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms'; import { Router } from '@angular/router'; interface eventP
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';
import { Router } from '@angular/router';
interface eventPlatform {
value: string;
viewValue: string;
}
interface resourcePerson {
value: string;
viewValue: string;
}
@Component({
selector: 'app-create-event',
templateUrl: './create-event.component.html',
styleUrls: ['./create-event.component.css']
})
export class CreateEventComponent implements OnInit {
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
eventPlatforms: eventPlatform[] = [
{value: 'Google Meet', viewValue: 'Google Meet'},
{value: 'Zoom', viewValue: 'Zoom'},
];
resourcePersons: resourcePerson[] = [
{value: '1', viewValue: '1'},
{value: '2', viewValue: '2'},
];
deleteResourceButton = true;
deleteContactButton = false;
constructor(
private _formBuilder: FormBuilder,
private router: Router) { }
ngOnInit(): void {
this.firstFormGroup = this._formBuilder.group({
eventDepartmentCtrl: ['', Validators.required],
eventNameCtrl: ['', Validators.required],
eventPlatformCtrl: ['', Validators.required],
eventStartTimeCtrl: ['', Validators.required],
eventEndTimeCtrl: ['', Validators.required],
eventEventKeyTakeawaysCtrl: ['', Validators.required],
contactPersonCtrl: this._formBuilder.array([this.getContactPerson()], [Validators.required, Validators.minLength(1), Validators.maxLength(2)]),
resourcePersonCtrl: this._formBuilder.array([this.getResourcePerson()], [Validators.required, Validators.minLength(1), Validators.maxLength(3)]),
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required]
});
}
addEvent(){
this.router.navigate(['/portal']);
}
addDraft(){
this.router.navigate(['/portal']);
}
cancelCreate(){
this.router.navigate(['/portal']);
}
// Resource Person
get resourcePersonArray() {
return <FormArray>this.firstFormGroup.get("resourcePersonCtrl");
}
addResourcePerson(){
this.resourcePersonArray.push(this.getResourcePerson());
}
deleteResourcePerson(index){
this.resourcePersonArray.removeAt(index);
}
getResourcePerson(){
return this._formBuilder.group({
personNameCtrl: ['', Validators.required],
personDesignationCtrl: ['', Validators.required],
personCompanyCtrl: ['', Validators.required],
socialMediaCtrl: this._formBuilder.array([this.getSocialMedia()], [Validators.required, Validators.minLength(1), Validators.maxLength(2)])
})
}
// Contact Person
get contactPersonArray() {
return <FormArray>this.firstFormGroup.get("contactPersonCtrl");
}
addContactPerson(){
this.contactPersonArray.push(this.getContactPerson());
}
deleteContactPerson(index){
this.contactPersonArray.removeAt(index);
}
getContactPerson(){
return this._formBuilder.group({
contactNameCtrl: ['', Validators.required],
contactNumberCtrl: ['', Validators.required],
})
}
// Social media
get socialMediaArray() {
return <FormArray>this.firstFormGroup.get("socialMediaCtrl");
}
addSocialMedia(){
this.socialMediaArray.push(this.getSocialMedia());
}
deleteSocialMedia(index){
this.socialMediaArray.removeAt(index);
}
getSocialMedia(){
return this._formBuilder.group({
socialMediaNameCtrl: ['', Validators.required],
socialMediaLinkCtrl: ['', Validators.required],
})
}
}
<div fxLayout="row" fxLayoutAlign="center start" class="mat-typography">
<div fxFlex="50%" fxFlex.xs="95%">
<br>
<h3 class="mat-subheading-2 white-text">Create New Event</h3>
<div class="example-container mat-elevation-z8">
<mat-vertical-stepper linear #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out</ng-template>
<p>Event Details</p>
<div fxLayout="row" fxLayoutAlign="right" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="100%" appearance="outline">
<mat-label>Department</mat-label>
<input matInput placeholder="Department name" formControlName="eventDepartmentCtrl"
required>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Event name</mat-label>
<input matInput placeholder="Event name" formControlName="eventNameCtrl" required>
</mat-form-field>
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Platform</mat-label>
<mat-select formControlName="eventPlatformCtrl" required>
<mat-option *ngFor="let eventPlatform of eventPlatforms"
[value]="eventPlatform.value">
{{eventPlatform.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Event Start</mat-label>
<input matInput type="datetime-local" formControlName="eventStartTimeCtrl"
placeholder="Start date">
</mat-form-field>
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Event End</mat-label>
<input matInput type="datetime-local" formControlName="eventEndTimeCtrl"
placeholder="Start date">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="100%" appearance="outline">
<mat-label>Event Key takeaways</mat-label>
<textarea matInput formControlName="eventEventKeyTakeawaysCtrl"
placeholder="Event Key Takeaways">
</textarea>
</mat-form-field>
</div>
<mat-divider></mat-divider>
<br>
<p>Contact Person Details</p>
<br>
<div formArrayName="contactPersonCtrl">
<div *ngFor="let item of contactPersonArray.controls; let i = index;" [formGroupName]="i">
<p>Contact Person: {{i+1}}</p>
<div fxLayout="row" fxLayoutAlign="right" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Name</mat-label>
<input matInput placeholder="Person Name" formControlName="contactNameCtrl"
required>
</mat-form-field>
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Phone Number</mat-label>
<input matInput placeholder="Person Number" formControlName="contactNumberCtrl"
required>
</mat-form-field>
<div class="button-padding">
<button mat-icon-button color="primary"
*ngIf="contactPersonArray.controls.length < 2" (click)="addContactPerson()">
<mat-icon>add</mat-icon>
</button>
<button mat-icon-button color="warn"
*ngIf="contactPersonArray.controls.length > 1"
(click)="deleteContactPerson(i)">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
</div>
<mat-divider></mat-divider>
<br>
<p>Resource Person Details</p>
<br>
<div formArrayName="resourcePersonCtrl">
<div *ngFor="let person of resourcePersonArray.controls; let i = index;" [formGroupName]="i">
<p>Resource Person: {{i+1}}</p>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Name</mat-label>
<input matInput placeholder="Person Name" formControlName="personNameCtrl"
required>
</mat-form-field>
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Designation</mat-label>
<input matInput placeholder="Person Designation"
formControlName="personDesignationCtrl" required>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="25px" class="mat-typography">
<mat-form-field fxFlex="100%" appearance="outline">
<mat-label>Company</mat-label>
<input matInput placeholder="Person Company" formControlName="personCompanyCtrl"
required>
</mat-form-field>
</div>
<div formArrayName="socialMediaCtrl">
<div *ngFor="let social of socialMediaArray.controls; let j = index;"
[formGroupName]="j">
<div fxLayout="row" fxLayoutAlign="right" fxLayoutGap="25px"
class="mat-typography">
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Social Media</mat-label>
<input matInput placeholder="Social Media Name"
formControlName="socialMediaNameCtrl" required>
</mat-form-field>
<mat-form-field fxFlex="50%" appearance="outline">
<mat-label>Social Media Link</mat-label>
<input matInput placeholder="Social Mediua Link"
formControlName="socialMediaLinkCtrl" required>
</mat-form-field>
<div class="button-padding">
<button mat-icon-button color="primary"
*ngIf="socialMediaArray.controls.length < 2"
(click)="addSocialMedia()">
<mat-icon>add</mat-icon>
</button>
<button mat-icon-button color="warn"
*ngIf="socialMediaArray.controls.length > 1"
(click)="deleteSocialMedia(j)">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
</div>
<div class="button-padding">
<button mat-raised-button *ngIf="resourcePersonArray.controls.length < 3"
(click)="addResourcePerson()">Add</button>
<button mat-raised-button color="warn"
*ngIf="resourcePersonArray.controls.length > 1"
(click)="deleteResourcePerson(i)">Delete</button>
</div>
<br>
<br>
<mat-divider></mat-divider>
<br>
<br>
</div>
</div>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<mat-label>Captcha</mat-label>
<input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Previous</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<p>You are now done.</p>
<div class="button-padding">
<button mat-button matStepperPrevious>Previous</button>
<button mat-button (click)="stepper.reset()">Reset</button>
<button mat-button color="warn" (click)="cancelCreate()">Cancel</button>
<button mat-raised-button (click)="addDraft()">Save Draft</button>
<button mat-raised-button color="primary" (click)="addEvent()">Submit</button>
</div>
</mat-step>
</mat-vertical-stepper>
</div>
</div>
// Social media
get socialMediaArray() {
// return []; // to test it uncomment this line
return <FormArray>this.firstFormGroup.get("socialMediaCtrl");
}
从'@angular/core'导入{Component，OnInit}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators、FormArray、FormControl}；
从'@angular/Router'导入{Router}；
接口事件平台{
值：字符串；
viewValue:字符串；
}
接口资源人员{
值：字符串；
viewValue:字符串；
}
@组成部分({
选择器：“应用程序创建事件”，
templateUrl:'./create event.component.html'，
样式URL:['./create event.component.css']
})
导出类CreateEventComponent实现OnInit{
firstFormGroup:FormGroup；
第二组：表格组；
eventPlatform:eventPlatform[]=[
{value:'谷歌见面'，viewValue:'谷歌见面'}，
{value:'Zoom'，viewValue:'Zoom'}，
];
资源人员：资源人员[]=[
{value:'1'，viewValue:'1'}，
{value:'2'，viewValue:'2'}，
];
deleteResourceButton=true；
deleteContactButton=false；
建造师(
private _formBuilder:formBuilder，
专用路由器：路由器{}
ngOnInit（）：void{
this.firstFormGroup=this.\u formBuilder.group({
eventDepartmentCtrl:[''，验证程序。必需]，
eventNameCtrl:[''，验证程序。必需]，
eventPlatformCtrl:[''，验证程序。必需]，
eventStartTimeCtrl:[''，验证器。必需]，
eventEndTimeCtrl:[''，验证程序。必需]，
EventKeyTakeawaysCtrl:[''，验证器。必需]，
contactPersonCtrl:this.\u formBuilder.array（[this.getContactPerson（）]，[Validators.required，Validators.minLength（1），Validators.maxLength（2）]，
resourcePersonCtrl:this.\u formBuilder.array（[this.getResourcePerson（）]，[Validators.required，Validators.minLength（1），Validators.maxLength（3）]，
});
this.secondFormGroup=this.\u formBuilder.group({
secondCtrl:[''，验证程序。必需]
});
}
addEvent（）{
this.router.navigate（['/portal']）；
}
添加草稿（）{
this.router.navigate（['/portal']）；
}
取消创建（）{
this.router.navigate（['/portal']）；
}
//顾问
获取resourcePersonArray（）{
返回此.firstFormGroup.get（“resourcePersonCtrl”）；
}
addResourcePerson（）{
this.ResourcePersonary.push（this.getResourcePerson（））；
}
删除资源人（索引）{
this.resourcePersonArray.removeAt（索引）；
}
getResourcePerson（）{
返回此。\u formBuilder.group({
personNameCtrl:[''，验证程序。必需]，
PersonSignationCtrl:[''，验证器。必需]，
personCompanyCtrl:[''，验证器。必需]，
socialMediaCtrl:this.\u formBuilder.array（[this.getSocialMedia（）]，[Validators.required，Validators.minLength（1），Validators.maxLength（2）]）
})
}
//联系人
获取contactPersonArray（）{
返回此.firstFormGroup.get（“contactPersonCtrl”）；
}
addContactPerson（）{
this.contactPersonary.push（this.getContactPerson（））；
}
删除联系人（索引）{
this.contactPersonArray.removeAt（索引）；
}
getContactPerson（）{
返回此。\u formBuilder.group({
contactNameCtrl:[''，验证程序。必需]，
contactNumberCtrl:[''，验证器。必需]，
})
}
//社交媒体
获取socialMediaArray（）{
返回此.firstFormGroup.get（“socialMediaCtrl”）；
}
addSocialMedia（）{
this.socialMediaArray.push（this.getSocialMedia（））；
}
删除社交媒体（索引）{
this.socialMediaArray.removeAt（索引）；
}
getSocialMedia（）{
返回此。\u formBuilder.group({
socialMediaNameCtrl:[''，验证者。必填]，
socialMediaLinkCtrl:[''，验证器。必需]，
})
}
}
创建新事件
填写
活动详情
部门
事件名称
站台
{{eventPlatform.viewValue}
事件开始
事件结束
事件密钥外卖
联系人详细信息
联系人：{{i+1}
名称
电话号码
添加
删除
this.firstFormGroup = this._formBuilder.group({
eventDepartmentCtrl: ['', Validators.required],
eventNameCtrl: ['', Validators.required],
eventPlatformCtrl: ['', Validators.required],
eventStartTimeCtrl: ['', Validators.required],
eventEndTimeCtrl: ['', Validators.required],
eventEventKeyTakeawaysCtrl: ['', Validators.required],
contactPersonCtrl: this._formBuilder.array([this.getContactPerson()], [Validators.required, Validators.minLength(1), Validators.maxLength(2)]),
resourcePersonCtrl: this._formBuilder.array([this.getResourcePerson()], [Validators.required, Validators.minLength(1), Validators.maxLength(3)]),
});