forma kątowa: Dodaj niestandardowy html do pól formularza

Question

Właśnie zacząłem zaglądać do formy kątowej, więc może to być coś, co przeoczyłem w dokumentacji lub opisie.

Co próbuję zrobić, to dodać ikonę obok etykiety wygenerowanych pól formularza i obok samego pola. Tak:

Ale po wyjęciu z pudełka kątowej-schema formularza wygeneruje:

wiem, że mogę zrobić moje własne niestandardowe typy pól, ale jest to, że po drodze iść? To wymagałoby ode mnie ponownego zdefiniowania wszystkich typów pól w niestandardowym wariancie, ponieważ potrzebuję tych dwóch ikon i ich funkcjonalności na wszystkich polach formularzy.

Miałem nadzieję, że istnieje prostszy sposób dodania tej funkcji do wygenerowanego html i łatwego sposobu dodania funkcjonalności (funkcja ng-click) na nich.

Edycja: Po ponownym przeczytaniu docs, mam zorientowali się, że trzeba zdefiniować własny typ pola niestandardowego (https://github.com/Textalk/angular-schema-form/blob/development/docs/extending.md)

Z czego wnoszę, muszę dodać następujące moduły do ​​mojego config blok:

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

dodaliśmy też zawartość shared/templates/customInput.tpl.html do $templatesCache.

Ale gdy próbuję renderować formularz, o schemacie jak

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

widzę tylko pierwsze pole (imię) i wiek. Typ niestandardowy jest po prostu ignorowany.

Próbowałem debugować moją drogę do problemu, ale o ile widzę, niestandardowe pole jest poprawnie dodane do dekoratora. Próbowałem konsoli.log schemaFormDecoratorsProvider.decorator() i tam widzę mój niestandardowy typ pola.

Próbowałem też odpalić $scope.$broadcast('schemaFormRedraw') w moim kontrolerze, ale nadal widzę tylko wbudowane typy pól.

Jako test, próbowałem zdefiniować własne dekorator, nadpisanie domyślnego Bootstrap dekorator:

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}, 
}, []); 

Spodziewam się, aby zobaczyć wszystkie pola, które mają mieć taki sam, odkąd tylko zdefiniować domyślne typ i mój własny niestandardowy typ. Ale nadal widzę tylko typy wbudowane renderowane, moja custominput jest do zignorowania.

Czego mi brakuje?

Answer 1

Mam ten sam problem, problem polega na tym, że nie należy mylić schematu JSON z definicją formularza.

Aby renderować komponent niestandardowy, należy zmienić definicję formularza. JA.e w kontrolerze Formularz standardowy defintion może wyglądać:

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

będziesz musiał zmienić to:

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