pasar parametros otro enviar entre datos comunicacion componentes componente angular angular2-template angular2-forms

angular - parametros - Se obtuvo una interpolación({{}}) donde se esperaba la expresión



pasar parametros entre componentes angular 4 (3)

Tengo el siguiente HTML pero obtengo la excepción. Como arreglarlo ?

Error del analizador: se obtuvo una interpolación ({{}}) donde se esperaba la expresión en la columna 48 en [! (EditForm.controls.field_item_exportExpression _ {{i}} ?. dirty && editForm.controls.field_item_exportExpression _ {{i}} ?. inválido) ]

<div class="form-group"> <label class="form-control-label" for="field_exportExpression">exportExpression</label> <input class="form-control" type="text" id="field_item_exportExpression_{{i}}" name="item_exportExpression_{{i}}" [(ngModel)]="datatype.items[i].exportExpression" required> <div [hidden]="!(editForm.controls.field_item_exportExpression_{{i}}?.dirty && editForm.controls.field_item_exportExpression_{{i}}?.invalid)"> <small class="form-text text-danger" [hidden]="!editForm.controls.field_item_exportExpression_{{i}}?.errors?.required" dpTranslate="dataconfiguration.validation.required"> This field is required. </small> </div> </div>

Lo siguiente no está funcionando. Diciendo token no deseado [ encontrado.

[hidden]="!editForm.controls.[''item_exportExpression_'' + i]?.errors?.required

Lo siguiente no es quejarse de [ pero quejarse Cannot read property ''0'' of undefined

[hidden]="!editForm.controls.item_exportExpression_[ i]?.errors?.required


Hay 4 tipos de fijaciones:

  • Enlace de propiedad es decir [] requerido para evaluar valores
  • Modelo de enlace, es decir [()] no requiere nada especial
  • Enlace de interpolación, es decir, {{}} podría usarse con atributos generales
  • Enlace de eventos ie () funcionó muy bien con funciones

Para responder a su pregunta, algo como esto nos funcionó:

<input type="checkbox" [id]="[''model-''+i]" [(ngModel)]="model" name="model-{{i}}" (change)="changeHandler($event)" />


modelo

<div [hidden]="!checkIfInvalid(i, ''item_exportExpression_'')"> <small class="form-text text-danger" [hidden]="isRequiredError(i, ''item_exportExpression_'')" dpTranslate="dataconfiguration.validation.required"> This field is required. </small> </div>

componente

checkIfInvalid( index: number, field: string ): boolean { const control = this.getControl( index, field ); if ( control && control.dirty && !control.valid ) { return true; } return false; } isRequiredError( index: number, field?: string ): boolean { const control = this.getControl( index, field ); if ( control && control.getError( "required" ) ) { return true; } return false; }


{{}} nunca va junto con [prop]="..." o (event)="..."

<small class="form-text text-danger" [hidden]="!editForm.controls.[''field_item_exportExpression_'' + i]?.errors?.required" dpTranslate="dataconfiguration.validation.required"> This field is required. </small>