Question

我提交后如何重置表单并标记为未触及，清理等因为我留在页面上并且用户可以重新提交

    this.myForm.reset()
    this.myForm.markAsPristine()
    this.myForm.controls['options_name'].markAsUntouched()

当我重置时，我得到一个带有红色下划线的验证错误。表单确实重置，我得到一个看起来很丑的验证错误。

<md-input-container>
  <input mdInput placeholder="Name" formControlName="options_name" style="color:#000000;font-size:14px;width: 110px;">
    <md-error *ngIf="myForm.controls['options_name'].hasError('required')">
          <strong>required</strong>
    </md-error>
</md-input-container>

Answer 1

我希望它会帮助别人。

我确信所有有经验的开发人员都会为此找到解决方法。我认为以下内容会对某些初学者有所帮助。

您可以定义自己的不变变量，如下所示：

<div [hidden]="q_text.valid || q_text.pristine || isQTextUnTouched" class="warning">

然后在输入中添加（ngModelChange）=“ onQTextChanged（）”如下：

<input type="text" id="q_text" autocomplete="off" size="40" required 
        [(ngModel)]="model.q_text" (ngModelChange)="onQTextChanged()" 
        name="q_text" #q_text="ngModel">

然后将以下内容添加到onQTextChanged（）：

onQTextChanged() {
    this.isQTextUnTouched = false;
  }

然后每次您重置表单集时this.isQTextUnTouched = true;

就是这样。

在我的应用程序中，一个组件（LoopQuestions）使用另一个组件（QuestionForm）中定义的表单循环问题。而且我确实在使用RxJS订阅的构造函数中将this.isQTextUnTouched重置为true。

为此，我使用official documentation中的示例，但MissionControl.component.ts（在我的情况下为LoopQuestions）代替任务将新的QuestionModel实例发送给astronaut.component.ts（在我的情况下为QuestionForm）。而不是在astronaut.component.ts中确认任务接受，QuestionForm确认该表单已提交。然后LoopQuestions立即再次发送一个新的QuestionModel实例。

LoopQuestions的构造函数：

  constructor(private route: ActivatedRoute, private router: Router, private newPollService: NewPollService) {
    newPollService.aQuestionCompleted$.subscribe(
      () => {
        this.q_number++;
        if (this.q_number > this.q_qnty) { this.router.navigate(['/home']); }
        this.goToNextQuestion();
      });
  }

  goToNextQuestion() {
    const nextQuestion = new QuestionModel( ... your default values ... );
    this.newPollService.announceQuestionStart(nextQuestion);
  }

QuestionForm的构造函数：

  constructor(
      private router: Router,
      private newPollService: NewPollService
    ) {
    this.subscription = newPollService.questionLoopStarted$.subscribe(
      nextQuestion => {
        this.isQTextUnTouched = true;
        this.model = nextQuestion;
      }
    );
  }

LoopQuestion的html：

<div>
    <h4>New question - question # {{q_number}}:</h4>

  <app-question-form></app-question-form>

</div>

注意：我没有添加任何形式的form.reset（），因为它导致了意外的行为。

Answer 2

将角形setValue Or patchValue用于反应形式。

Angular2重置表单并标记为未触及

2 个答案: