Javascript 角度形式保持返回false（角度2）

我在Angular 2中有一个表单，我正在用模型驱动的方式验证它。我想知道如何将状态从false更改为true，因为我有验证规则，即使用户正确填写了所有内容，它也会不断返回invalid（false）。下面是HTML代码

<div class="wrap-page">
  <form [formGroup]="myForm" novalidate class="form-contato" (ngSubmit)="enviarMensagem(myForm.value, myForm.valid)">
    <div class=row>
      <div class="col s12">
        <h4> Contato </h4>
      </div>
      <div class="col s12 m12 l6">
        <label> Nome: </label>
        <input type="text" name="nome" formControlName="nome" class="forms-econ" required placeholder="ex: José Silva">
        <div class="div-validar">
          <span [hidden]="myForm.controls.nome.valid || (myForm.controls.nome.pristine && !submitted)">
            Nome Inválido (mínimo 3 caracteres).
          </span>
        </div>
      </div>
      <div class="col s12 l6">
        <label> E-mail: </label>
        <input type="email" class="forms-econ" formControlName="email" required name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
          placeholder="exemplo@exemplo.com">
        <div class="div-validar">
          <span [hidden]="myForm.controls.email.valid || (myForm.controls.email.pristine && !submitted)">
            E-Mail inválido
          </span>
        </div>
      </div>


      <div class="col s12 l6">
        <label>Telefone: </label>
        <input type="tel" class="forms-econ" name="telefone" formControlName="telefone" pattern="[0-9]" placeholder="(xx)9 9999-99999">
      </div>
      <div class="col s12 l6">
        <label> Motivo do Contato: </label>
        <select name="assunto" formControlName="assunto" class="forms-econ">
          <option value="motivo_01">Motivo 01</option>
          <option value="motivo_02">Motivo 02</option>
          <option value="motivo_03">Motivo 03</option>
          <option value="motivo_03">Motivo 04</option>
        </select>

      </div>
      <div class="col s12">
        <label> Mensagem: </label>
        <textarea name="mensagem" formControlName="mensagem" placeholder="Mensagem..." rows="15"> 
        </textarea>
        <div class="div-validar">
          <span [hidden]="myForm.controls.mensagem.valid || (myForm.controls.mensagem.pristine && !submitted)">
            O campo mensagem é obrigatório
          </span>
        </div>
      </div>
       <div class="col s12">
        <label> ID: </label>
        <textarea name="id" formControlName="id" placeholder="Mensagem..." rows="15"> 
        </textarea>
      </div>
      <h1> {{myForm.valid | json}} </h1> // <-- Here is where I'm printing the status of the form (always return false)
      <div class="col s12 right-align">
        <input type="submit" value="Enviar" class="btn-form">
      </div>

    </div>
  </form>
</div>

康塔托
诺姆：
诺姆·因瓦利多（米尼莫3克拉）。
电邮：
电子邮件inválido
电话：
Motivo do Contato：
莫蒂沃01
莫蒂沃02
莫蒂沃03
莫蒂沃04
策略：
O campo mensageéobrigatório
身份证件：
{{myForm.valid | json}/在Angular 2中，不需要在（ngSubmit）上传递
valid
实体，只需将所需的表单名称传递给表单组指令即可

(ngSubmit)="enviarMensagem(myForm)"


enviarMensagem({model, valid }: {model: Object, valid: boolean}) {
    this.submitted = true;      
    console.log(model, valid); 
}

您的问题在于电子邮件和电话验证。它们总是验证为
false

由于您使用的是被动表单，因此我建议您将
模式
检查移动到表单的构建中，例如：

email: ['', [<any>Validators.required, Validators.pattern(....)]],

只是一个随机的电话号码验证，因为我不确定你需要什么样的号码验证。这一个检查电话号码是否只包含数字

如果需要，也可以在表单无效时禁用“提交”按钮：

<input [disabled]="!myForm.valid" type="submit" value="Enviar" class="btn-form">



但这当然取决于你！：）

希望这有帮助
 非常感谢您提供的提示，但我对“有效”的理解仍然是错误的，您知道可能会发生什么吗？这真的帮了我很大的忙，非常感谢，非常好的解释：）
<span *ngIf="myForm.get('nome').hasError('required')">
   Name required!
</span><br>

<span *ngIf="!myForm.controls.nome.pristine">
   Name required!
</span><br>

EMAIL_REGEXP = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$';

<input [disabled]="!myForm.valid" type="submit" value="Enviar" class="btn-form">