我正在尝试在Mat对话框中显示添加播放列表,该播放列表使用(formArray)像这样在列表中包含歌曲:
但是我没有犯什么错误
我的对话看起来是这样:
我的Dialog.component.html
<h1 mat-dialog-title>Create New Playlist
</h1>
<form [formGroup]='form'>
<div>
<div mat-dialog-content>
<mat-form-field class="input-width" appearance="standard">
<mat-label>Playlist name</mat-label>
<input matInput placeholder="" required formControlName="name" [(ngModel)]="data.name">
</mat-form-field>
<mat-form-field class="input-width" appearance="standard">
<mat-label>Description</mat-label>
<input matInput placeholder="" required formControlName="description" [(ngModel)]="data.description" >
</mat-form-field>
<div formArrayName="songs" >
<div *ngFor = "let song of form.controls.songs?.value; let i = index">
<div class="song-input-wrapper" [formGroupName]="i">
<mat-form-field appearance="standard">
<mat-label>Song Title</mat-label>
<input matInput placeholder="" required formControlName="title">
</mat-form-field>
<mat-form-field appearance="standard">
<mat-label>Artist</mat-label>
<input matInput placeholder="" required formControlName="artist">
</mat-form-field>
<mat-form-field appearance="standard">
<mat-label>Duration</mat-label>
<input matInput type="number" required formControlName="duration">
<span matSuffix>minutes</span>
</mat-form-field>
<button mat-icon-button color="primary" (click)="addSong()">
<mat-icon>add_circle</mat-icon>
</button>
<button
*ngIf="form.controls.songs?.value > 1"
mat-icon-button
color="warn"
(click)="removeSong(i)"
>
<mat-icon>remove_circle</mat-icon>
</button>
</div>
</div>
</div>
</div>
</div>
<mat-dialog-actions class="action-buttons">
<button mat-raised-button color="warn" (click)="close()" >Cancel </button>
<button mat-raised-button color="primary" [disabled] = "form.invalid" (click)="onSubmit()" [mat-dialog-close]="data">Submit</button>
</mat-dialog-actions>
</form>
和我的dialog.componenet.ts:
export class DialogComponent implements OnInit {
description:string;
songs: FormArray;
constructor(public service: PlaylistService,public dialogRef: MatDialogRef<DialogComponent>, private formBuilder: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: Playlist )
{
}
form : FormGroup = new FormGroup(
{
name:new FormControl('', Validators.required),
description:new FormControl('',Validators.required),
title:new FormControl('',Validators.required),
artist:new FormControl('',Validators.required),
duration:new FormControl(0,[Validators.required , Validators.min(0)]),
songs: this.formBuilder.array([ ])
}
)
songsform() :FormArray {
return this.form.get('songs') as FormArray ;
}
addCreds() {
const creds = this.form.controls.credentials as FormArray;
creds.push(this.formBuilder.group({
title:'',
artist: '',
duration: 0,
}));
}
ngOnInit(): void {
}
close() {
this.dialogRef.close();
}
createSong(): FormGroup {
return this.formBuilder.group({
title: [null, Validators.required],
artist: [null, Validators.required],
duration: [null, Validators.compose([Validators.required, Validators.min(0)])],
});
}
addSong(): void {
this.songs.push(this.createSong());
}
removeSong(index: number): void {
if (this.songs.controls.length > 1) {
this.songs.removeAt(index);
}
}
onSubmit(){
this.dialogRef.close(this.form.value);
}
}
最后是打开对话框和播放列表类所在的组件:
export interface Playlist {
name: string;
totalDuration: number;
totalSongs: number;
description: string;
songs: Song[];
}
export interface Song {
title: string;
artist: string;
duration: number;
}
@Component({
selector: 'app-playlist',
templateUrl: './playlist.component.html',
styleUrls: ['./playlist.component.css']
})
export class PlaylistComponent implements OnInit {
constructor(public dialog: MatDialog,public service: PlaylistService) { }
ngOnInit(): void {
}
playlists: Playlist[] = [
{
name: 'Kopikustik',
totalDuration: 5,
totalSongs: 2,
description: 'More than a coffee, this is all of your favorite accoustic songs.',
songs: [
{
title: 'Cigarettes of ours',
artist: 'Ardhito Pramono',
duration: 3
},
{
title: 'Walking Back Home',
artist: 'Vira Talisa',
duration: 2
},
]
},
{
name: 'Anime Hits',
totalDuration: 13,
totalSongs: 3,
description: 'Listen to your favorite Anime songs, all in one playlist.',
songs: [
{
title: 'Renai Circulation',
artist: 'Kana Hanazawa',
duration: 4
},
{
title: 'Platinum Disco',
artist: 'Tsukihi Phoenix',
duration: 4
},
{
title: 'Silhouette',
artist: 'KANA-BOON',
duration: 5
},
]
}
];
name:String
@Input() data: Playlist
openDialog(): void {
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = false;
const dialogRef = this.dialog.open(DialogComponent, {
width: '900px',
data: {
name : this.name,
songs: []
}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
if (result) {
this.name = result.name;
alert("name is :"+ this.name)
}
});
}
deletePlaylist(i)
{
this.playlists.splice(i, 1);
}
}
[如果有人熟悉或可以看到我所缺少的,请帮助我我一直在寻找类似的解决方案和示例,但是我总是得到相同的界面
根据此article,看起来您需要在创建表单(创建表单的位置)时在数组项内设置表单组实例。在ngOnInit()上尝试一下:
form : FormGroup = new FormGroup({
name:new FormControl('', Validators.required),
description:new FormControl('',Validators.required),
title:new FormControl('',Validators.required),
artist:new FormControl('',Validators.required),
duration:new FormControl(0,[Validators.required , Validators.min(0)]),
songs: this.formBuilder.array([ this.createSong() ])
});
希望有帮助。