프로그래밍 방식으로 양식 작성 및 제출 각도 4

Question

다음과 같은 문제점이 있습니다. 양식을 자동 완성해야하고 즉시 우편 방법으로 일부 URL에 제출해야합니다. 이 구성 요소 .TS 및 HTML 예입니다

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, Renderer } from '@angular/core'; 
 
import { ActivatedRoute } from '@angular/router'; 
 

 
import { PayModel } from './shared/pay.model'; 
 
import { PayService } from './shared/pay.service'; 
 
@Component({ 
 
    selector: 'cp-pay', 
 
    templateUrl: './pay.component.html', 
 
    styleUrls: ['./pay.component.css'] 
 
}) 
 
export class PayComponent implements OnInit { 
 

 
    model: PayModel; 
 
    cardProcessingId: number; 
 

 
    constructor(
 
     private payService: PayService, 
 
     private route: ActivatedRoute, 
 
     private renderer: Renderer 
 

 
    ) { 
 
     this.cardProcessingId = route.snapshot.params["processingid"]; 
 
    } 
 
    ngOnInit() { 
 
     this.model = new PayModel(); 
 
     this.getProcessing(); 
 

 
    } 
 

 
    getProcessing() { 
 
     this.payService.getProcessing(this.cardProcessingId).subscribe(
 
      res => { 
 
       this.model.fname = res.fname; 
 
       this.model.lname = res.lname; 
 
       this.model.age = res.age; 
 
       } 
 
       err => { 
 
       console.log('getProcessing Error') 
 
      }, 
 
      () => { 
 
       let form: HTMLFormElement = <HTMLFormElement>document.getElementById('payform'); 
 
       
 
       form.submit(); 
 
      } 
 
     ); 
 
    } 
 
}

<form ngNoForm id="payform" action="https://localhost:44300/api/pay/test" target="_blank" method="post"> 
 
     <input type="text" id="fname" name="merchant" value="{{model.fname}}" /> 
 
     <input type="text" name="lname" value="{{model.lame}}" /> 
 
     <input type="text" name="age" value="{{model.age}}" /> 
 
     <input type="submit"> 
 
</form>

난 그냥 원시 HTML 양식은 그게 다야, URL에 게시 할 수 있지만, 코드) form.submit을 (칠 때이 널 (null)을 게시 할

값만. 제출 버튼 클릭 시뮬레이션을 시도했지만 작동하지 않습니다. 나는 그런 종류의 것이 가능하다고 생각해? 양식이 채워지기 전에 양식이 제출되는 것 같습니다. Pls 도움

Answer 1

마지막으로! 해결 방법을 찾았습니다. 먼저 문제가 발생했습니다 : html에 값이 채워지기 전에 양식 제출이 발생했으며 게시 된 데이터는 비어있었습니다 (null). Angular가 ApplicationRef 모듈을 사용하고 싶을 때마다 html을 값으로 채워야한다는 것을 알지 못했습니다. 모듈을 가져 와서 ApplicationRef 인스턴스를 생성하고 html 값을 채울 때마다 메소드 .tick()을 호출하기 만하면됩니다. 내 코드는 지금과 같이해야한다 : form 태그에 필요하지 html로 측 ngNoForm에

 

    import { Component, OnInit, ElementRef, AfterViewInit, ApplicationRef} from '@angular/core'; 
    import { ActivatedRoute } from '@angular/router'; 

    import { PayModel } from './shared/pay.model'; 
    import { PayService } from './shared/pay.service'; 
    @Component({ 
     selector: 'cp-pay', 
     templateUrl: './pay.component.html', 
     styleUrls: ['./pay.component.css'] 
    }) 
    export class PayComponent implements OnInit { 

     model: PayModel; 
     cardProcessingId: number; 

     constructor(
      private payService: PayService, 
      private route: ActivatedRoute, 
      private appRef: ApplicationRef 

     ) { 
      this.cardProcessingId = route.snapshot.params["processingid"]; 
     } 
     ngOnInit() { 
      this.model = new PayModel(); 
      this.getProcessing(); 

     } 

     getProcessing() { 
      this.payService.getProcessing(this.cardProcessingId).subscribe(
       res => { 
        this.model.fname = res.fname; 
        this.model.lname = res.lname; 
        this.model.age = res.age; 
        appRef.tick(); // to immediately force html value fill 
        } 
        err => { 
        console.log('getProcessing Error') 
       }, 
       () => { 
        let form: HTMLFormElement = document.getElementById('payform'); 

        form.submit(); 
       } 
      ); 
     } 
    } 

.