3

I am using ng-admin to write a admin management. I met below issue, can somebody help me?

In my creationView, I would like to show different fields(text/video/pictures) according to the selection of "type" field. How I can make it? 

var articles = nga.entity('articles');
articles.creationView().fields([
      nga.field('type','choice')
            .validation({ required: true })
            .choices([
                // 1: txt, 2: pic, 3: vid
                { value: 1, label: 'Text'},
                { value: 2, label: 'Picture'},
                { value: 3, label: 'Video'},
            ]),
      nga.field('txt','file')
          .attributes({ placeholder: 'Write something... !' }),
      nga.field('pic','file')
          .label('Picture(.jpg|.png)')
          .uploadInformation({ 'url': '/api/adminapi/uploadPicture', 'apifilename': 'pictures', 'accept': 'image/jpg,image/png'}),
      nga.field('vid','file')
         .label('Video(.mp4)')
         .uploadInformation({ 'url': '/api/adminapi/uploadVideo', 'apifilename': 'video', 'accept': 'video/mp4'}),

])
Nancy
  • 41
  • 3

2 Answers2

5

The Field Configuration doc page explains how to do this using the "template" field config:

template(String|Function, templateIncludesLabel=false) All field types support the template() method, which makes it easy to customize the look and feel of a particular field, without sacrificing the native features.

...

To force the template to replace the entire line (including the label), pass true as second argument to the template() call. This can be very useful to conditionally hide a field according to a property of the entry:

post.editionView() .fields([ nga.field('category', 'choice') .choices([ { label: 'Tech', value: 'tech' }, { label: 'Lifestyle', value: 'lifestyle' } ]), nga.field('subcategory', 'choice') .choices(function(entry) { return subCategories.filter(function (c) { return c.category === entry.values.category; }); }) // display subcategory only if there is a category .template('<ma-field ng-if="entry.values.category" field="::field" value="entry.values[field.name()]" entry="entry" entity="::entity" form="formController.form" datastore="::formController.dataStore"></ma-field>', true), ]);

Rich
  • 15,048
  • 2
  • 66
  • 119
1

I just have a work round method. That is using .attributes(onclick, "return updateButton();") for nga.field("type"). In updateButton() method, it will help to check current 'type' field value and using DOM methods to change the button enable and disabled.

However, I still realy appreciate that if this requirement can be support in future. It will be helpful for user to make UI controls easily.

Nancy
  • 41
  • 3