Question

我遇到的问题是表单显示输入字段的错误。我不知道它为什么显示它可能是由于缺乏理解。所以我有一个名为编辑团队的组件。在这个编辑团队组件中，我有一个输入字段，其值设置为当前团队名称。如果我将焦点放在输入文本字段上，然后移除焦点让我们说背景，那么表单会触发一个＆＃34; required＆＃34;即使预设值不变也会出错。

<div class="form-group">
    <label class="control-label" for="name">Name</label>
    <input tabindex="0" type="text" placeholder="Please enter the team name" title="Please enter the team name" required value=""
               id="name" class="form-control" name="name" formControlName="name" [value]="nameValue">

    // This is the condition for when the error is shown. 
    // So when the input field is touched, check if an error 
    // exists for the validator required. 
    <div class='form-text error' *ngIf="editTeamFormGroup.controls.name.touched">
        <div *ngIf="editTeamFormGroup.controls.name.hasError('required')" class="help-block error small">Team name is required.</div>
    </div>
</div>

这是组件的构造函数和ngOnIt方法。订阅是针对团队服务中的可观察的，当团队改变时，这些值也是如此。

constructor(private fb: FormBuilder,
              private teamService: TeamService,
              private router: Router,
              public modalService: ModalService) { }

  ngOnInit() {
    this.teamService.teamChange.subscribe(result => {
      this.team = result;
      this.nameValue = this.team.name;
      this.descriptionValue = this.team.description;
    });


    this.editTeamFormGroup = this.fb.group({
      'name': [ this.nameValue, Validators.required ],
      'description': [ this.descriptionValue, Validators.required ]
    });
  }

注意：控制台内没有错误。如果我将字符添加到预设值并将焦点更改为另一个元素，则验证将按预期工作。

Answer 1

这是因为您设置表单的方式。由于this.teamService.teamChange是异步的，因此您无法保证{<1}}在创建 this.nameValue之前设置为。

如果您等到获得必要的信息然后启动表单组，那么事情就会正常运行。除非您有充分理由，否则请勿this.editTeamFormGroup与[value]一起使用formControlName。

模板

<input>

背后的代码

<form [formGroup]="editTeamFormGroup" *ngIf="editTeamFormGroup"> ... <div class="form-group"> <label class="control-label" for="name">Name</label> <input tabindex="0" type="text" placeholder="Please enter the team name" title="Please enter the team name" required value="" id="name" class="form-control" name="name" formControlName="name"> </form>

Angular 4 Reactive Form Validator Required在预设值时显示触摸错误

1 个答案: