angular2

Question

<form #formRef="ngForm" novalidate (submit)="isvalid()"> 

これで、フォームの提出プロパティを設定する方法は、我々が持っている.. とフォームが送信されるたびに、コンポーネントクラス

@ViewChild('formRef') form: NgForm; 

に、isValidメソッドが呼び出されたそのフォームがされていますいくつかのバリデーションをチェックします。 フォームに「submit」フォームが送信されているかどうかを示すプロパティがあります。

my isValidメソッドの内部からコンポーネントからプロパティsubmit.ttoをfalseに設定する方法はありますか？私は値をクリアしたくない。それはこのプロパティだけです。

Answer 1

私があなたがやっていることに従うと思うなら、

<form name="form" (ngSubmit)="f.form.valid && submit()" #f="ngForm" style="width:100%;"> 
    <input matInput placeholder="Age" name="age" [(ngModel)]="model.age" #age="ngModel" type="number" required> 
    <input matInput placeholder="Hours drinking" name="hoursdrinking" [(ngModel)]="model.hoursdrinking" #hoursdrinking="ngModel" type="number" required> 
    <div *ngIf="error" class="alert" [ngClass]="{'alert-danger': over, 'alert-warning' : under, 'alert-success': sober}" [innerHTML]="error"></div> 
    <button [disabled]="loading" mat-raised-button color="accent">Submit</button> 
    <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /> 
</form> 

私は何を持っていることはここでは、唯一の有効な提出と提出するフォームは、呼ばれたモデルとロードバーにマッピングされているいくつかの基本的な入力、エラー/成功メッセージ

です私はここに私のコンポーネントで、持っている例のフォームは、私が持っているものです。

model: any = {}; 
loading = false; 
error = ''; 

そして、あなたはここに提出したい私は、例として持っているものです。

submit() { 
     this.loading = true; 
     this.sendForm().subscribe(
      (data) => { 
       if(data.includes('Success')) { 
        this.loading = false; 
        this.error = data; 
        this.sober = true; 
        this.over = false; 
        this.under = false; 
       } 
       if(data.includes('Warning')){ 
        this.error = data; 
        this.loading = false; 
        this.sober = false; 
        this.over = false; 
        this.under = true; 
       } 
       if(data.includes('Danger')) { 
        this.error = data; 
        this.loading = false; 
        this.sober = false; 
        this.over = true; 
        this.under = false; 
       } 
      }, //changed 
      (err)=> { 
       console.log(err); 
       this.error = 'Something went wrong'; 
       this.loading = false; 
      }, 
      ()=>console.log("Done") 
     ); 
    } 

    public sendForm() { 
     var postData = "age=" + this.model.age 
      + "&gender=" + this.model.gender 
      + "&weight=" + this.model.weight 
      + "&height=" + this.model.height 
      + "&fitness=" + this.model.fitness 
      + "&hoursDrinking=" + this.model.hoursdrinking 
      + "&otherC=" + this.model.standard 
      + "&beerC=" + this.model.beer 
      + "&wineC=" + this.model.wine 
      + "&spiritsC=" + this.model.spirits 
      + "&alcopopC=" + this.model.alcopop 
      + "&ciderC=" + this.model.cider; 
     let headers: Headers; 
     headers = new Headers(); 
     headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
     return this.http.post('/php/calculator.php', postData, {headers: headers}) 
      .map((res:any) => res.text()) 
    } 

私が提出したとき、私が個人的に使用した有用なものの大きな例を挙げることに疲れました。 その電卓は、送信時に 'sendForm（）'関数を使用してそれにサブスクライブし、そのデータをチェックして、データに特定の文字列値が含まれている場合は応答を送信します。ここでは、私たちの形で持っている：

<div *ngIf="error" class="alert" [ngClass]="{'alert-danger': over, 'alert-warning' : under, 'alert-success': sober}" [innerHTML]="error"></div> 

innerHTMLプロパティとして設定し、その私のPHPファイルからの私の結果が含まれていると
ので、私が受け取ったときに正しくフォーマットことしたいです！

https://callum.tech/#/bac