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>