Реализация директивы отправки формы на основе родительского компонента - PullRequest
0 голосов
/ 16 ноября 2018

Здравствуйте, я пытаюсь понять, как вы можете создавать многократно используемые формы в Typescript. Я понял, что вы можете создать Form Component, написать его HTML файл, в котором вы используете model fields. Вы оставляете файл .ts без изменений.

Затем вы получаете компонент, которому нужна форма, и встраиваете selector в родительский файл component HTML:

Компонент формы

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.sass']
})
    export class UserFormComponent implements OnInit {
      public  Submit(empform:NgForm):void{    //can i make this abstract...or somehow make it available from the parent component to implement?
        console.log(empform);
      }
      constructor() { }

      ngOnInit() {

      }

    }
    <form #userForm="ngForm" (ngSubmit)="Submit(userForm)">
    <div class="form-group">
          <label>Id</label>
          <input id="id" [(ngModel)]="id" type="text" class="form-control" name="jid">
        </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <//form>

Итак, теперь я понимаю, что если вы объявите переменную внутри parent Component с полями, названными как в вашей формеуспешно связал их.

Родительский компонент

 export class CreateComponent implements OnInit {

     public id:number; // this parent variable is bound to the field of the form 


      submit(empForm:NgForm):void{   //override or something depending on the parent
        console.log(empForm);
      }
}

<div id="childForm">
        <app-user-form></app-user-form>
</div>

Что мне интересно, так это то, как я могу заставить form выставить method для parent, а родитель для его реализации?Я хочу, чтобы form онемел, а родитель решал, как реагировать на submit.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...