Angular 6 - проверка и отправка формы извне формы

Question

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit(exampleForm)">
...
</form>

Здесь я использую Угловые 6 Реактивные формы.

Итак, моя внешняя кнопка:

<button mat-icon-button type="submit">
      <img src="../../../../../../assets/images/icon/save-1.svg"/>
</button>

Итак, я хочу проверить формуи отправить.И если есть ошибки проверки, кнопка сохранения должна быть отключена.

Вот реализация onSubmit ().

onSubmit(form : FormGroup){
this.shareObjectRequest = this.shareObjectForm.value;
if (form.value.id != null) {
  this.reportShareObjectService.put(this.reportId, this.shareObjectRequest).subscribe(
    result => {
    },
    err => {
      console.log("Error Occured." + JSON.stringify(err));
    });
}
else {
  this.reportShareObjectService.create(this.reportId, this.shareObjectRequest).subscribe(
    result => {
    },
    err => {
      console.log("Error Occured" + JSON.stringify(err));
    });
  }
}

Answer 1

Если вы уже создали FormGroup в компоненте, и это то, к чему вы привязываете шаблон, вам просто нужно снова сослаться на FormGroup в отключенном атрибуте.

Даже если в моем примере кнопкавнутри формы это не имеет значения, потому что вы используете переменную, объявленную в компоненте в качестве ссылки, поэтому вы можете использовать ее везде, где когда-либо в html

<form autocomplete="off" [formGroup]="actualFormGroup" (ngSubmit)="submitForm()" class="data-form">
  ...

  <div class="button-wrapper">
    <button class="classic-purple-button cursor-pointer no-outline" [disabled]="!actualFormGroup.valid" type="submit">
        Continuar
    </button>
  </div>
</form>

Answer 2

Вот мой ответ.Но кнопка здесь не затенена. Для этого мне нужно использовать ngStyle в кнопке.

<button form="ngForm" mat-icon-button type="submit" [disabled]="myform.invalid">
      <img  src="../../../../../../assets/images/icon/save-1.svg"/>
</button>

<form [formGroup]="myform" (ngSubmit)="onSubmit(shareObjectForm)" id="ngForm">
</form>

onSubmit(form : FormGroup){
   this.shareObjectRequest = this.shareObjectForm.value;
   if (form.value.id != null) {
      this.reportShareObjectService.put(this.reportId, this.shareObjectRequest).subscribe(
         result => {
      },
         err => {
           console.log("Error Occured." + JSON.stringify(err));
         });
    }
    else {
       this.reportShareObjectService.create(this.reportId, this.shareObjectRequest).subscribe(
         result => {
         },
         err => {
            console.log("Error Occured" + JSON.stringify(err));
       });
   }
}

Answer 3

Создать форму с тегом form или без него.

Проверка огня из вашего ts.

submitForm() {
   for (let v in this.exampleForm.controls) {
         this.exampleForm.controls[v].markAsTouched();
   }
   if (this.exampleForm.valid) {

   }
}

И использование (click) внутри html.

<button type="submit" class="btn btn-primary"
 (click)="submitForm()">Submit</button>
</div>

Проверьте это Stackblitz

Answer 4

Предполагая, что у нас есть (упрощенный код)

class MyComponent {
   myForm = new FormGroup();
   doSave() {
      const form = this.myForm;
      // form.value.id
   }
}

<form [formGroup]="myForm" (ngSubmit)="doSave()">
...
</form>
<ng-container *ngIf="myForm.valid">
  your button if valid
  <button (click)="doSave()">Save</button>
</ng-container>
<ng-container *ngIf="!myForm.valid">
  your button if NOT valid
</ng-container>

Сейчас ...

• Вы можете позвонить doSave() везде, где видите.
• myForm.valid предоставит вам информацию, если ваша форма действительна.Вы можете использовать два отдельных раздела, как в моем примере, если [disabled]="myForm.valid" не работает для вас.

Answer 5

Это достижимо в форме HTML5.

<form id="myform" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
.......
</form>

<div class="form-group">
   <button type="submit" class="btn btn-primary"  form="myform">Register</button>
</div>

Создан блик стека https://stackblitz.com/edit/angular-pwu69r