Atributo de nome de formulário dynamic em Angularjs

Como alguém usaria formName.inputName. $ Válido quando o “inputName” fosse criado dinamicamente?

   

A saída do atributo de input HTML ‘name’ seria a string “variablename”, que seria aplicada a TODAS as inputs repetidas.

Se nós tentássemos isso

    

A saída do atributo de input HTML ‘name’ seria a string “{{variable.name}}”, que seria aplicada a TODAS as inputs repetidas.

Em qualquer uma dessas duas condições, um atributo de nome para cada um dos elementos de input repetidos não seria criado dinamicamente; TODAS as inputs compartilham o mesmo nome de input. Não é muito bom se você quiser chamar uma input específica com base em um nome específico.

  • precisa usar valores de nome dynamics
  • precisa ser capaz de chamar $ scope.formName.dynamicName. $ valid
  • precisa ser capaz de chamar $ scope.formName.
  • precisa de campos de input de nomes dynamics para serem adicionados ao formulário nested ou ao formulário principal

Parece que o Angular 1.3 corrigiu isso ( https://stackoverflow.com/a/32907176/3854385 )

Isso agora é possível com o Angular 1.3+:

 
Enter a name

Demonstração

Em alguns casos, uma forma interna é uma boa solução se você puder apenas passar as informações: ( https://stackoverflow.com/posts/12044600/ ) Para resolver o problema do ‘nome dynamic’, você precisa criar uma forma interna (veja a ng -forma ) :

 
URL error

A outra alternativa seria escrever uma diretiva personalizada para isso.

Aqui está o jsFiddle mostrando o uso do ngForm: http://jsfiddle.net/pkozlowski_opensource/XK2ZT/2/

Não consegui encontrar a resposta que satisfizesse algumas ou todas essas necessidades. Isso é o que eu criei.

Pode haver uma maneira melhor, então, por favor, compartilhe seus pensamentos.
Estou usando o Angularjs 1.3.0-beta.8

Eu tenho um formulário com diretivas multi-aninhadas que todos contêm input (s), select (s), etc … Esses elementos são todos contidos em ng-repetições e valores dynamics de seqüência de caracteres.

Isto é como usar a diretiva:

 
ex: ex:

Nota: você pode adicionar e indexar a concatenação de strings se precisar serializar talvez uma tabela de inputs; foi o que eu fiz. No entanto, inputs de nome dinâmicas significa que você pode não saber o nome da input do formulário, portanto, como você chamaria $ scope.formName. ??????. Você pode iterar o object $ scope.formName para obter chaves que correspondam a um determinado valor. Isso significa concatenação de string como esta:

 my-name="{{ dynamicString + hello + '/' + 'myFormName' }}" 

Em seguida, em $ scope.myFormName, você encontraria qualquer nome de input de formulário apenas repetindo o object e reunindo as chaves que incluíam ‘olá’.

 app.directive('myName', function(){ var myNameError = "myName directive error: " return { restrict:'A', // Declares an Attributes Directive. require: 'ngModel', // ngModelController. link: function( scope, elem, attrs, ngModel ){ if( !ngModel ){ return } // no ngModel exists for this element // check myName input for proper formatting ex. something/something checkInputFormat(attrs); var inputName = attrs.myName.match('^\\w+').pop(); // match upto '/' assignInputNameToInputModel(inputName, ngModel); var formName = attrs.myName.match('\\w+$').pop(); // match after '/' findForm(formName, ngModel, scope); } // end link } // end return function checkInputFormat(attrs){ if( !/\w\/\w/.test(attrs.rsName )){ throw myNameError + "Formatting should be \"inputName/formName\" but is " + attrs.rsName } } function assignInputNameToInputModel(inputName, ngModel){ ngModel.$name = inputName } function addInputNameToForm(formName, ngModel, scope){ scope[formName][ngModel.$name] = ngModel; return } function findForm(formName, ngModel, scope){ if( !scope ){ // ran out of scope before finding scope[formName] throw myNameError + "
element named " + formName + " could not be found." } if( formName in scope){ // found scope[formName] addInputNameToForm(formName, ngModel, scope) return } findForm(formName, ngModel, scope.$parent) // recursively search through $parent scopes } });

Isso deve lidar com muitas situações em que você simplesmente não sabe onde o formulário será. Ou talvez você tenha formulários nesteds, mas por algum motivo você deseja append esse nome de input a dois formulários? Bem, basta passar o nome do formulário ao qual você deseja append o nome da input.

O que eu queria, era uma maneira de atribuir valores dynamics a inputs que eu nunca conhecerei, e depois apenas chamar $ scope.myFormName. $ Valid.

Isso pode ser um exagero e existe uma solução melhor em 1.3+. Eu não consegui encontrá-lo no tempo que tive. Isso funciona para mim agora.

Boa sorte! Espero que isso ajude alguém !!!!

trabalhar para mim com 1,2,7 angular

directiva:

 var DynamicName = function() { return { restrict: 'A', priority: -1, require: ['ngModel'], link: function (scope, element, attr, ngModel) { ngModel[0].$name = attr.name; } }; }; app.directive('dynamicName', DynamicName); 

Como usar:

 

Não se esqueça de que você pode acessar objects javascript usando a notação de matriz com índices de string. Dado o seguinte object de definição de formulário arbitrário:

 $scope.form_def = { form_name : 'BallForm', variables : [ height : { name : 'Height', type : 'text' }, width : { name : 'Width', type : 'text' }, color : { name : 'Color', type : 'multi', options : ['red', 'green', 'blue'] } ] }; $scope.form_values = {}; 

… e o snippet html …

 

Dentro do controlador, você teria um bom object form_values ​​para cada campo que você pode acessar, iterando sobre as chaves no hash form_def.variables.

Há muito mais envolvido quando você começa a escrever estes tipos de scripts de processamento de formulários genéricos e você acaba com um monte de código espaguete na minha opinião e você provavelmente seria melhor de ir com uma solução menos geral, mas Essa é outra pergunta.