TransWikia.com

Uso de la propiedad form de un botón con binding [] en Angular

Stack Overflow en español Asked by Israel-ICM on January 5, 2021

Tengo el siguiente formulario:

HTML

<mat-card>
  <form novalidate id='myForm' (ngSubmit)="executeForm()" [formGroup]="formPrueba">
    <mat-form-field>
        <input matInput type="text" placeholder="Texto 1" formControlName='text1' autocomplete="off">
        <mat-error>El texto 1 es obligatorio</mat-error>
    </mat-form-field>

    <mat-form-field>
        <input matInput type="text" placeholder="Texto 2" formControlName='text1' autocomplete="off">
        <mat-error>El texto 2 es obligatorio</mat-error>
    </mat-form-field>
  </form>
</mat-card>

<button mat-stroked-button [form]='idForm'>Aceptar</button>

TypeScript

  public idForm = 'myForm';
  public formPrueba: FormGroup;
  constructor(private fb: FormBuilder) {
    this.formPrueba = this.fb.group({
      text1: new FormControl(null, Validators.required),
      text2: new FormControl(null, Validators.required)
    });
  }

  executeForm() {
    console.log('funciona');
  }

Necesito que el submit se encuentre afuera del formulario pero éste funcione con un binding de entrada [form]="idForm", pero cuando realizo esta acción me muestra el error:

Can’t bind to ‘form’ since it isn’t a known property of ‘button’.

¿Existe otra forma de realizar esta acción?

One Answer

Para agregar atributos o propiedades al formulario como no reconoce como propiedades de ese elemento, las tienes que agregar de la siguiente forma. [attr.propiedad]="valor"

<button mat-stroked-button [attr.form]='idForm'>Aceptar</button>

Correct answer by Eduardo Jaramillo Licea on January 5, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP