Angular 以角度反应式表单提交表单后显示错误

我已经创建了一个反应形式和使用角材料形式控制

在表单提交时，我正在调用API，该API返回错误，因为其中一个formControl值无效

例如，

网站已注册

现在，我想在msg中显示这个错误，但是没有显示错误

  <mat-form-field class="full-width website"
    [appearance]="matAppearance">
    <mat-label>Website URL</mat-label>
    <input matInput
      placeholder="Website URL"
      name="website"
      formControlName="website">
    <mat-error *ngIf="configurationForm.get('website').hasError('required')">
      <strong>(required)</strong>
    </mat-error>
    <mat-error *ngIf="configurationForm.get('website').hasError('pattern')">
      Invalid URL
    </mat-error>
    <mat-error *ngIf="websiteErrMsg">{{websiteErrMsg}}</mat-error>
  </mat-form-field>

  public submitForm() {
      this.testService.register().subscribe(
        sucRes => {
          console.log('done);
        },
        errRes => {
          if (errRes.error === 'Website is already registered') {
              this.websiteErrMsg = 'Website Already Registered!';
          }
        }
      );
  }

网站地址
（必选）
无效的URL
{{websiteermsg}}
公共提交表单（）{
这个.testService.register（）.subscribe(
sucRes=>{
console.log（'done'）；
},
errRes=>{
如果（errRes.error==='网站已注册'）{
this.websiteermsg='网站已注册！'；
}
}
);
}

问题1：我犯了什么错误

编辑：

---

我已尝试更改

mat error

或

div

，然后开始工作。现在我想知道为什么它不能处理mat error（错误）

这并不准确，但我认为使用异步验证器（参见）可以解决您的问题。AsyncValidators的问题在于性能。如果您没有使用updateOn“blur”或“submit”，每次更改表单时，Angular都会打电话

假设您有一个服务，它返回一个可观察到的真或假，如

@Injectable({ providedIn: 'root' })
export class ApiService {
  getWebName(webName: string): Observable<boolean> {
    const isTaken = webName=="Vivek Kumar";
    return of(isTaken).pipe(delay(1000));
  }
}

我们的函数“checkIfNotRegister”是

更新2019-06-27

但这并不需要等待检查是否有效，所以需要进行另一个步骤，将其订阅到this.testForm.statusChanges，这样我们的submitForm就变成了

submitForm() {
    if (this.testForm.valid) {
      this.testForm.statusChanges.pipe(take(2),last()).subscribe(res=>{
          //if res=='VALID' make something
          //if res=='INVALID'we don't need make nothing
          console.log(res)
      })
      this.testForm.get('name').setAsyncValidators(this.checkIfNotRegister());
      this.testForm.get('name').updateValueAndValidity({onlySelf:false,emitEvent:true});
      this.testForm.get('name').setAsyncValidators(null);
    }

我们的表单不需要验证程序onBlur或onSubmit

this.testForm = new FormGroup(
      {
        name: new FormControl("Vivek Kumar", Validators.required),
        age: new FormControl(30, Validators.required)
      }
    );

---

您可以在最终结果中看到，这并不准确，但我认为使用异步验证器（参见）可以解决您的问题。AsyncValidators的问题在于性能。如果您没有使用updateOn“blur”或“submit”，每次更改表单时，Angular都会打电话

假设您有一个服务，它返回一个可观察到的真或假，如

@Injectable({ providedIn: 'root' })
export class ApiService {
  getWebName(webName: string): Observable<boolean> {
    const isTaken = webName=="Vivek Kumar";
    return of(isTaken).pipe(delay(1000));
  }
}

我们的函数“checkIfNotRegister”是

更新2019-06-27

但这并不需要等待检查是否有效，所以需要进行另一个步骤，将其订阅到this.testForm.statusChanges，这样我们的submitForm就变成了

submitForm() {
    if (this.testForm.valid) {
      this.testForm.statusChanges.pipe(take(2),last()).subscribe(res=>{
          //if res=='VALID' make something
          //if res=='INVALID'we don't need make nothing
          console.log(res)
      })
      this.testForm.get('name').setAsyncValidators(this.checkIfNotRegister());
      this.testForm.get('name').updateValueAndValidity({onlySelf:false,emitEvent:true});
      this.testForm.get('name').setAsyncValidators(null);
    }

我们的表单不需要验证程序onBlur或onSubmit

this.testForm = new FormGroup(
      {
        name: new FormControl("Vivek Kumar", Validators.required),
        age: new FormControl(30, Validators.required)
      }
    );

---

您可以在中看到，当FormControl出现错误时，最终结果

MatFormField

仅显示

mat error

元素。它不会仅仅因为您通过

ngIfElse

告诉它而显示。。如果您在

mat表单字段

之外给出

mat error

，则它可以工作。是否有方法在提交表单后设置formcontrol error。我尝试调用

this.configurationForm.get（'website'）.setErrors（{apiErr:true}）

并在html中进行了必要的更改

我认为您只需要使用自定义验证器来处理此问题..您可以为您的代码提供stackblitz吗？？？
MatFormField
仅在FormControl出现错误时显示
mat error
元素。它不会仅仅因为您通过
ngIfElse
告诉它而显示。。如果您在
mat表单字段
之外给出
mat error
，则它可以工作。是否有方法在提交表单后设置formcontrol error。我尝试调用
this.configurationForm.get（'website'）.setErrors（{apiErr:true}）
并在html中进行了必要的更改
我认为您只需要使用自定义验证器来处理此问题..您能为stackblitz提供您的代码吗？您好@eliseo，非常感谢您的回复。但asyncValidator将在
blur
事件时自动触发。我的要求是在提交表单后触发验证，这可能是一种在多个字段上出现错误的情况。：：glups：：没错。。。。但是我只是更新了stackblitz和答案。我的解决方案是，在submit中，创建一个setAsyncValidators并创建一个updateValueAndValidity（），请参阅我的答案UpdateHi@eliseo，非常感谢您的回复。但asyncValidator将在
blur
事件时自动触发。我的要求是在提交表单后触发验证，这可能是一种在多个字段上出现错误的情况。：：glups：：没错。。。。但是我只是更新了stackblitz和答案。我的解决方案是，在submit中，创建一个setAsyncValidators并创建一个updateValueAndValidity（），请参见我的答案更新
this.testForm = new FormGroup(
      {
        name: new FormControl("Vivek Kumar", Validators.required),
        age: new FormControl(30, Validators.required)
      }
    );