Question

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

这是我们的形式.. 并在组件类

中

 @ViewChild('formRef') form: NgForm;

每当提交表单时，都会调用isvalid方法来检查某些验证。表格中有一个属性已提交＆＃39;它告诉表单是否已提交

如何将组件中提交的属性设置为false;以编程方式从我的isValid方法内部设置？我不想清除任何值。它只是这个属性。

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

有没有办法在angular2中设置表单的提交属性

1 个答案: