ngOnInit () {
this.buildForm({
- 'display-name': this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME,
+ displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME,
privacy: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_PRIVACY,
description: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DESCRIPTION,
videoChannelId: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_CHANNEL_ID,
thumbnailfile: null
})
+ this.form.get('privacy').valueChanges.subscribe(privacy => {
+ this.videoPlaylistValidatorsService.setChannelValidator(this.form.get('videoChannelId'), privacy)
+ })
+
populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
this.serverService.videoPlaylistPrivaciesLoaded.subscribe(
const body = this.form.value
const videoPlaylistCreate: VideoPlaylistCreate = {
- displayName: body['display-name'],
+ displayName: body.displayName,
privacy: body.privacy,
description: body.description || null,
videoChannelId: body.videoChannelId || null,
<div class="row">
<div class="col-md-12 col-xl-6">
<div class="form-group">
- <label i18n for="display-name">Display name</label>
+ <label i18n for="displayName">Display name</label>
<input
- type="text" id="display-name"
- formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
+ type="text" id="displayName"
+ formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
>
- <div *ngIf="formErrors['display-name']" class="form-error">
- {{ formErrors['display-name'] }}
+ <div *ngIf="formErrors['displayName']" class="form-error">
+ {{ formErrors['displayName'] }}
</div>
</div>
<option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
</select>
</div>
+
+ <div *ngIf="formErrors['videoChannelId']" class="form-error">
+ {{ formErrors['videoChannelId'] }}
+ </div>
</div>
<div class="form-group">
ngOnInit () {
this.buildForm({
- 'display-name': this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME,
+ displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME,
privacy: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_PRIVACY,
description: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DESCRIPTION,
videoChannelId: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_CHANNEL_ID,
thumbnailfile: null
})
+ this.form.get('privacy').valueChanges.subscribe(privacy => {
+ this.videoPlaylistValidatorsService.setChannelValidator(this.form.get('videoChannelId'), privacy)
+ })
+
populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
this.paramsSub = this.route.params.subscribe(routeParams => {
const body = this.form.value
const videoPlaylistUpdate: VideoPlaylistUpdate = {
- displayName: body['display-name'],
- privacy: body['privacy'],
+ displayName: body.displayName,
+ privacy: body.privacy,
description: body.description || null,
videoChannelId: body.videoChannelId || null,
thumbnailfile: body.thumbnailfile || undefined
private hydrateFormFromPlaylist () {
this.form.patchValue({
- 'display-name': this.videoPlaylistToUpdate.displayName,
+ displayName: this.videoPlaylistToUpdate.displayName,
privacy: this.videoPlaylistToUpdate.privacy.id,
description: this.videoPlaylistToUpdate.description,
videoChannelId: this.videoPlaylistToUpdate.videoChannel ? this.videoPlaylistToUpdate.videoChannel.id : null
import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Validators } from '@angular/forms'
+import { AbstractControl, FormControl, Validators } from '@angular/forms'
import { Injectable } from '@angular/core'
import { BuildFormValidator } from '@app/shared'
+import { VideoPlaylistPrivacy } from '@shared/models'
@Injectable()
export class VideoPlaylistValidatorsService {
this.VIDEO_PLAYLIST_CHANNEL_ID = {
VALIDATORS: [ ],
- MESSAGES: { }
+ MESSAGES: {
+ 'required': this.i18n('The channel is required when the playlist is public.')
+ }
+ }
+ }
+
+ setChannelValidator (channelControl: AbstractControl, privacy: VideoPlaylistPrivacy) {
+ if (privacy.toString() === VideoPlaylistPrivacy.PUBLIC.toString()) {
+ channelControl.setValidators([ Validators.required ])
+ } else {
+ channelControl.setValidators(null)
}
+
+ channelControl.markAsDirty()
+ channelControl.updateValueAndValidity()
}
}
<form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
<div class="form-group">
- <label i18n for="display-name">Display name</label>
+ <label i18n for="displayName">Display name</label>
<input
- type="text" id="display-name"
- formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
+ type="text" id="displayName"
+ formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
>
- <div *ngIf="formErrors['display-name']" class="form-error">
- {{ formErrors['display-name'] }}
+ <div *ngIf="formErrors['displayName']" class="form-error">
+ {{ formErrors['displayName'] }}
</div>
</div>
import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models'
import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms'
import { I18n } from '@ngx-translate/i18n-polyfill'
-import { secondsToTime, timeToInt } from '../../../assets/player/utils'
+import { secondsToTime } from '../../../assets/player/utils'
type PlaylistSummary = {
id: number
this.resetOptions(true)
this.buildForm({
- 'display-name': this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
+ displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
})
forkJoin([
}
createPlaylist () {
- const displayName = this.form.value[ 'display-name' ]
+ const displayName = this.form.value[ 'displayName' ]
const videoPlaylistCreate: VideoPlaylistCreate = {
displayName,