2016-01-14 20 views
5

Ben sadece açısal-şema-formuna bakmaya başladım, bu yüzden bu belgelerde veya açıklamasında kaçırdığım bir şey olabilir.açısal-şema-form: alanları oluşturmak için özel html ekleyin

Yapmaya çalıştığım, oluşturulan form alanlarının etiketinin yanında ve alanın yanında bir simge eklemektir. böylece gibi: Benim kendi özel alan türlerini yapabilirsiniz biliyorum

Generated input field

ama arada olmasıdır: Regular input field

Ama kutu açısal-şema formun dışına

üretecektir gitmek? Bu, tüm alan türlerini özel bir varyasyonda yeniden tanımlamamı gerektirir, çünkü bu iki simgeye ve tüm form alanlarımdaki işlevlerine ihtiyacım var.

Bu işlevi, oluşturulmuş html'ye eklemenin daha kolay bir yolu olduğunu ve bunlara işlevsellik (ng tıklama işlevi) eklemenin kolay bir yolunu umuyordum.

Düzenleme: Yeniden dokümanlar aracılığıyla okuduktan sonra ben araya gelen kendi özel alan türünü (https://github.com/Textalk/angular-schema-form/blob/development/docs/extending.md)

tanımlamak gerektiğini anladım, benim modülleri config aşağıdaki eklemem gerekiyor blok:

schemaFormDecoratorsProvider.addMapping(
    'bootstrapDecorator', 
    'custominput', 
    'shared/templates/customInput.tpl.html', 
    sfBuilderProvider.builders.sfField 
); 

Ayrıca $templatesCache için shared/templates/customInput.tpl.html içeriğini ekledik.

Ama

"schema": { 
    "type": "object", 
    "properties": { 
     "firstName": { 
      "title": "First name", 
      "type": "string" 
     }, 
     "lastName": { 
      "title": "Last name", 
      "type": "custominput" 
     }, 
     "age": { 
      "title": "Age", 
      "type": "number" 
     } 
    } 
} 

gibi bir şemayla, bir form işlemek çalıştığımda sadece ilk alan (firstName) ve yaş bakın. Özel tip göz ardı edilir.

Sorunumda hata ayıklamayı denedim, ancak görebildiğim kadarıyla özel alan dekoratöre doğru şekilde ekleniyor. schemaFormDecoratorsProvider.decorator() konsolunu çalıştırmayı denedim ve özel alan türümü görebiliyorum.

Ayrıca denetleyicideki $scope.$broadcast('schemaFormRedraw')'u da kapatmayı denedim, ancak yine de yalnızca yerleşik alan türlerini görüyorum. Bir test

, varsayılan Bootstrap dekoratör üzerine yazarak kendi dekoratör tanımlamak denedim:

schemaFormDecoratorsProvider.defineDecorator('bootstrapDecorator', {   
    'customType': {template: 'shared/templates/customInput.tpl.html', builder: sfBuilderProvider.stdBuilders}, 
    // The default is special, if the builder can't find a match it uses the default template. 
    'default': {template: 'shared/templates/customInput.tpl.html', builder: sfBuilderProvider.stdBuilders}, 
}, []); 

Ben sadece bir varsayılan tanımlamak beri tüm alanlar aynı işlenecek görmeyi beklediğiniz ve kendi özel türüm. Ama yine de, sadece inşa edilen türlerde inşa ettiğimi görüyorum, benim özel girişim göz ardı edilene kadar.

Neyi eksik?

+0

Hiç bir cevabı buldunuz: Sen bu değiştirmek gerekecek

$scope.form = [ "*", { type: "submit", title: "Save" } ]; 

: Kumandanızda e standart formu Definition benzeyebilecek? Aynı problemle yüzleşiyorum –

cevap

1

Aynı problemi yaşadım, sorun JSON şemasını form tanımıyla karıştırmamalısınız.

Özel bir bileşen oluşturmak için form tanımını değiştirmeniz gerekir. BEN.

$scope.form = [ 
    "firstName", 
    "age", 
    { 
     key:"lastName", 
     type:"customInput" 
    }, 
    { 
     type: "submit", 
     title: "Save" 
    } 
    ]; 
İlgili konular