Как отправить форму из другого углового компонента 4? - PullRequest
0 голосов
/ 16 декабря 2018

Я застрял в чем-то, и мне нужна ваша помощь.

Я хочу отправить форму, которая находится в другом компоненте, а кнопка отправки находится в другом компоненте.

Как мне этого добиться?в угловых 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>

Файл .ts его форм

@Component({
selector: 'app-edit-information',
styleUrls: ['./edit-information.component.css'],
templateUrl: './edit-information.component.html'
})
export class EditInformationComponent implements OnInit { 
editInformationFunction(e) {
  console.log(this.editInformationModel);  
 this.editInformationService.editMemberInformation
 (this.editInformationModel).subscribe(
  response => {
    console.log(response);
    this.spinner.hide();
    if (response ['error'] == false) {
      console.log(response);
      this.toastr.success(response['data'], 
this.editInformationData.toastTitle.success);
    } else {
      this.spinner.hide();
      this.toastr.error(response['message'], 
this.editInformationData.toastTitle.error);
    }
  },
  err => {
    this.spinner.hide();
    this.toastr.error(err.error['message'], 
this.editInformationData.serverError);
    }
   )
  }
}

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>

Файл .ts его боковой панели

 @Component({
 selector: 'app-sidebar',
 styleUrls: ['./sidebar.component.css'],
templateUrl: './sidebar.component.html'
 })
export class SidebarComponent implements OnInit {}

Ответы [ 2 ]

0 голосов
/ 16 декабря 2018

Мое понимание: 1) Когда вы нажимаете «Отправить» в HTML на боковой панели, вы хотели бы выполнить функцию «editInformationFunction» в файле ts формы.

2) Я надеваюне вижу app-sidebar, включенного в HTML формы, и поэтому я предполагаю, что это братья и сестры.Таким образом, здесь нет прямых отношений родитель-потомок.

3) editInformationModel - это ключевая переменная, которую вы используете внутри функции editInformationFunction.

Решение: Чтовам нужен ' источник событий '.Это может легко решить вашу проблему.

i) Вы можете отправить событие из боковой панели приложения и перехватить его в родительском компоненте (скажем, app-component.html)

ii) Затем вы можете вызвать нужную функцию вфайл формы ts из родительского компонента.

Этот блог поможет вам.https://robferguson.org/blog/2017/08/31/angular-4-and-sibling-component-interaction/

У меня был похожий вариант использования.Этот метод работал на 100% и был намного проще.

0 голосов
/ 16 декабря 2018

Если ваши компоненты вовремя, более простой способ - использовать @Input и передать ваш компонент в ссылочную переменную.Например, ваш app.component похож на

<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);
    })
  }
}

в этом стеке бликов Я ставлю двумя способами

Выберите, где вы хотите сделать отправку: вы получите значение формы или в формекогда вы отправляете событие из nav-

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