Javascript 如何从其他组件4提交表单？

我在做什么事，我需要你的帮助

我想提交另一个组件中的表单，提交按钮位于另一个组件中

我怎样才能在第四章中做到这一点

这是我的代码的html

它的形式是html

    <form class="form form-validate" ngNativeValidate 
  (submit)="editInformationFunction($event)"
    #editForm="ngForm">
    <div class="row px-3 pb-3">

   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
    <!---------------Panel1 ------------------->
    <div class="panel panel-primary radius">
      <div class="panel-heading border-bottom p-2">
        <h3 class="panel-title m-0"><i class="fa fa-user green pl-3"> 
   </i> <span
          class="ml-2 font-weight-bold">PERSONAL INFORMATION</span> . 
   </h3>
        <span class="pull-right "><i class="glyphicon glyphicon- 
    chevron-down"> </i></span>
      </div>
      <div class="panel-body">

        <div class="row">

          <!--input fields-->

          <div class="col-xs-12 col-sm-12 col-md-12 col-md-6 col-lg-6 
    ">
            <div class="form-group mt-4 ml-4">
              <label for="name"><b>NAME<span class="text-danger ml-2">* 
    </span> </b></label>
              <input id="name" type="text" class="form-control"
                     [(ngModel)]="editInformationModel.name"
                     [ngModelOptions]="{standalone: true}" required>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-12 col-md-6 col-lg-6 
    ">
            <div class="form-group mt-4 mr-4">
              <label for="info"><b>BIRTH DATE
              </b></label>
              <input id="info" type="text" class="form-control"
                     [(ngModel)]="editInformationModel.birthdate ? 
     editInformationModel.birthdate : N/A "
                     [ngModelOptions]="{standalone: true}" required>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="form-group form-check-inline mt-1 ml-4">
              <b>GENDER<span class="text-danger ml-2">*</span></b>

              <div class="form-check-inline d-flex mt-1">

                 <label class="customradio"><span class="radiotextsty"> 
     <b>Male</b></span>
                  <input type="radio" checked="checked" name="radio"
                         [(ngModel)]="editInformationModel.sex"
                         [ngModelOptions]="{standalone: true}" 
   value="m">
                  <span class="checkmark"> </span>
                </label>
                <label class="customradio ml-2"><span 
    class="radiotextsty"><b>Female</b></span>
                  <input type="radio" name="radio"
                         [(ngModel)]="editInformationModel.sex"
                         [ngModelOptions]="{standalone: true}" 
    value="f">
                  <span class="checkmark"> </span>
                </label>

              </div>

            </div>
          </div>
</form>

这是我想提交表单的侧栏html

  <div class="d-flex" [hidden]="saveInformation">
  <button type="submit" class="btn btn-success btn-sm py-2 border-0"><i 
 class="fa fa-save"> </i>
    Save
    Information
  </button>
   <button class="btn btn-default btn-sm text-white ml-2 py-2" 
  routerLink="/household-information">
     Cancel
  </button>
  </div>

---

如果您的组件正在运行，更简单的方法是使用@Input并将组件传递到引用变量中。 例如 你的app.component就像

<hello #hello name="{{ name }}"></hello>
<nav-bar [component]="hello"></nav-bar>

接收事件的组件

export class HelloComponent implements OnInit {
  constructor(private service:DataService){  }
  ngOnInit()
  {
    this.service.myObservable.subscribe(res=>{
      console.log(res);
    })
  }
}

我把这两个方面都放进去了

---

选择您要提交的位置：在您的导航中获取表单的值，或者在您从导航发出事件时的表单中-

我的理解： 1） 当您在侧栏的HTML中单击“提交”时，您希望在表单的ts文件中执行函数“editInformationFunction”

2） 我没有看到表单的HTML中包含“应用程序侧栏”，因此我假设它们是兄弟。所以这里没有直接的亲子关系

3） editInformationModel-这是在“editInformationFunction”中使用的关键变量

解决方案： 您需要的是一个“事件发射器”。它可以很容易地解决你的问题

i） 您可以从应用程序侧栏发出事件，并在父组件（比如app-component.html）中捕获它

ii）然后可以从父组件调用表单ts文件中所需的函数

这个博客将帮助你

---

我有一个类似的用例。这个方法100%有效，而且非常简单。

谢谢你，兄弟：）我将阅读该博客，顺便说一句，它包含在htmlWelcome表格中。但是，当我在HTML表单中使用Ctrl+F时，这里发布的代码没有应用程序选择器。好吧，如果应用程序边栏是表单的子项，那么您可以使用Eliseo提到的@Input绑定。它能与表单一起工作吗？例如，我们必须在哪里提交函数？Usman，如果您选择在具有表单的组件中调用服务，您可以在组件中订阅，并且在订阅中，您可以调用组件的任何函数。如果您选择呼叫导航栏中的服务，您在component.editInformationModel.values中拥有表单的值我应用了此代码，但我的表单提交了多次意味着我在第一次收到成功消息，两次收到成功消息，四次收到成功消息，依此类推，我不知道为什么@Eliseowh在使用getter时会在组件的生命周期内多次执行getter。这是因为我们必须小心使用。如果是关于恢复变量的值或类似的东西的话，那就不重要了。如果你使用了一个不应该出现的主题，你能看到我关于这个主题的最新帖子吗@埃利塞

<hello #hello name="{{ name }}"></hello>
<nav-bar [component]="hello"></nav-bar>

@Component({
  selector: 'nav-bar',
  template: `<button (click)="click()">click me</button>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class NavBarComponent  {
  @Input()component:any
  click()
  {
    console.log(this.component.variable)
  }
}

@Injectable()

export class DataService {

  private mySubjectSource = new Subject<any>();
  myObservable=this.mySubjectSource.asObservable();

  constructor(){}

  sendValue(value:any)
  {
    this.mySubjectSource.next(value);
  }
}

export class NavBarComponent  {
  constructor(private service:DataService){}
  click2()
  {
    this.service.sendValue("save data")
  }
}

export class HelloComponent implements OnInit {
  constructor(private service:DataService){  }
  ngOnInit()
  {
    this.service.myObservable.subscribe(res=>{
      console.log(res);
    })
  }
}