Échec de l'exécution de 'setAttribute' sur 'l'Élément': ']' n'est pas valide, le nom de l'attribut. angulaire 4

J'obtiens l'erreur suivante:

Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name.

J'ai simplement fait modèle:

export interface ModalComponentModel {
    username: string;
    password: string;
    password2: string;
    description: string;
}

Je l'ai utilisé dans mon composant:

composant:

model: ModalComponentModel;

Puis j'ai essayé de l'utiliser dans mon fichier html:

    <div class="modal-header">
    <h4 class="modal-title text-center">Edit Profile</h4>
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-2 col-md-offset-2">
            <form class="form" role="form" (ngSubmit)="whatDoesThisFormDo()">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" class="form-control" name="username" id="username" placeholder="Your username"
                           [(ngModel)]="model.username">
                </div>
                <div class="form-group">
                    <label for="password1">Password</label>
                    <input type="password" class="form-control" name="password1" id="password1" placeholder="Your password"
                           [(ngModel)]="model.password">
                </div>
                <div class="form-group">
                    <label for="password2">Confirm Password</label>
                    <input type="password" class="form-control" name="password2" id="password2" placeholder="Your password"
                           [(ngModel)]="model.password2">
                </div>
                <div class="form-group">
                    <textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"]></textarea>
                </div>
                <div class="row">
                    <div class="col-xs-1">
                        <button value="update" type="button" class="btn btn-primary pull-left">Update</button>
                    </div>
                    <div class="col-xs-1">
                        <button value="cancel" type="button" class="btn btn-primary pull-left">Cancel</button>
                        <div class="clear"></div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

Ça marchait très bien jusqu'à ce que j'ai ajouté à modèle HTML complet est ci-dessus comme demandé.

Je suis également pas en mesure d'obtenir les boutons correctement de l'autre côté.

l'erreur est de somwhere d'autre, post le html
Elle ne doit avoir aucune erreur. C'est peut-être quelque part d'autre.
full HTML attaché
full html ci-joint.
Je suis confronté à un problème, et voici le lien stackblitz.com/edit/angular-1ahx9b donc, pouvez-vous svp m'aider à résoudre ce problème. Ma question est : je vais avoir 20 panneaux et chaque panneau d'avoir un groupe de radio et de chaque radio du groupe ayant 5 boutons radio, et en dessous un bouton radio il y a une zone de commentaire. Donc, je veux que lorsque je choisit la troisième bouton radio puis spécifique de cette expansion sur le panneau de la boîte de commentaires sera facultatif sinon c'est nécessaire. Actuellement, le changement qui se passe dans tous les mat-expansion-panneau souhaitez faire des modifications sur des panneau que j'ai sélectionner le bouton radio. merci

InformationsquelleAutor Drew1208 | 2017-08-21

angular

54

[(ngModel)]="model.description"] //'] "est ajouté inutilement

changer de

[(ngModel)]="model.description"

Ne pas envelopper d'un crochet.

Mise à jour:

Vous pouvez initialiser votre model variable comme suit en fonction de votre besoin,
```
model:ModalComponentModel=<ModalComponentModel>{};
```
OU
```
model:ModalComponentModel=<ModalComponentModel>[];
```
- Bonne prise, mais maintenant il dit ERROR TypeError: Cannot read property 'username' of undefined
- c'est la même réponse donnée ci-dessous
InformationsquelleAutor micronyks
8

Problème, c'est cette ligne

Changement

De
```
  <textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"]></textarea>
```
à
```
  <textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"></textarea>
```
- Bonne prise, mais maintenant il dit ERROR TypeError: Cannot read property 'username' of undefined
- utiliser le modèle d'opérateur?.nom d'utilisateur ou un ensemble de modèle:ModalComponentModel=[];
- Je viens de poster une nouvelle copie que j'ai été partiellement conscient qu'un nouveau message d'erreur sera là. Drew va poser un problème nouveau.
- @Drew1208 ^^^^^
InformationsquelleAutor Sajeetharan

Vous avez un problème dans cette ligne de code:

<textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"]></textarea>

Il devrait être:

<textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"></textarea>

Il y a un support qui est à l'origine de cette erreur.

InformationsquelleAutor vertika

0

Dans mon cas, j'ai eu un 0 inséré dans une table d'attributs de l'élément de la liste. De sorte que le dom a été d'essayer de les traiter de 0 comme un attribut de la table. Retirer résolu le problème. Deux personnes ont passé 3 heures à chercher le bug.
```
<table style="width:100%" 0>
```
InformationsquelleAutor Arul Rozario
0

J'ai obtenu cette erreur à partir d'une faute de frappe lorsque vous essayez d'ajouter un attribut à un les directives de l'hôte.
```
@Directive({
  ...
  host: {    
    '[style.touchAction' <-- missing closing bracket : '"none"',
  }
})
```
InformationsquelleAutor Nayfin

Vous devez vous connecter pour publier un commentaire.